-webkit-transform impide que la página se cargue

He tenido un problema con la image de background que no se reproduce correctamente en el iPad . La respuesta provista que resolvió el problema fue agregar -webkit-transform: translateZ(0); a la id que resolvió el problema pero causó otro. En una página (que es una página muy larga), el contenido deja de cargarse a la mitad de la página. Si -webkit-transform: translateZ(0); el problema se detiene (el problema de background también reaparece). ¿Por qué -webkit-transform: translateZ(0); ¿Evita que la página se cargue?

CSS con webkit-transform:

 #wrap { margin:0 auto; position:relative; padding:0; background: #B3B1B2 url(http://sofes.miximages.combgs/parchment2.jpg); -webkit-transform: translateZ(0); } 

Notas:

  • Esto sucede en el iPad Mini con iOS 6.1.3
  • Este problema no aparece en el iPhone 4 (la misma versión de iOS) o en Chrome.
  • Esto causa problemas importantes en Safari 5.1 (estoy ejecutando Windows).

    ¿Has probado?

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

    o:

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

    Para resolver este problema de renderización, tuve que activar Acceleration de hardware en otros elementos de la página que envolvían el contenido. En los casos de este sitio se encuentra #main-content y #footer .

    ¡Este sitio me dio la idea de intentar acelerar otros elementos en la página y funcionó!