-webkit-transform Prevents Page From Loading

Question

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:

• This happens on the iPad Mini running iOS 6.1.3
• This problem doesn't appear on the iPhone 4 (same version of iOS) or in Chrome.
• This does cause major issues in Safari 5.1 (I am running Windows).

Answer 1

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!

Answer 2

Have you tried?

#wrap {
    margin:0 auto;
    position:relative;
    padding:0;
    background: #B3B1B2 url(/images/bgs/parchment2.jpg);
    -webkit-transform: translate3D(0, 0, 0); 
}

or:

#wrap {
    margin:0 auto;
    position:relative;
    padding:0;
    background: #B3B1B2 url(/images/bgs/parchment2.jpg);
    -webkit-transform: translate(0, 0); 
}