I have had an issue with the Background Image not rendering correctly on the iPad. The answer provided which did solve the issue was to add -webkit-transform: translateZ(0);
to the id
that solved the issue but caused another one. On one page (which is a very long page) the content stops loading half-way through the page. If I remove -webkit-transform: translateZ(0);
the issue stops (the background problem also reappears). Why does -webkit-transform: translateZ(0);
prevent the page from loading?
CSS with webkit-transform:
#wrap {
margin:0 auto;
position:relative;
padding:0;
background: #B3B1B2 url(/images/bgs/parchment2.jpg);
-webkit-transform: translateZ(0);
}
Notes:
To solve this rendering issue I had to trigger Hardware Acceleration on other elements on the page that were wrapping the content. In the cases of this site is was #main-content
and #footer
.
This site gave me the idea to try accelerating other items on the page and it worked!