-webkit-transform Empêche la page De

Question

J'ai eu un problème avec le Background Image not rendering correctly on the iPad. La réponse fournie qui a résolu le problème consistait à ajouter -webkit-transform: translateZ(0); au id qui a résolu le problème mais en a causé un autre. Sur une page (qui est une très longue page) le contenu arrête de se charger à mi-chemin de la page. Si je supprime -webkit-transform: translateZ(0); le problème s'arrête (le problème d'arrière-plan réapparaît également). Pourquoi -webkit-transform: translateZ(0); empêche le chargement de la page?

CSS avec webkit-transform:

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

Notes:

• Cela se produit sur l'iOS en cours d'exécution iPad Mini 6.1.3
• Ce problème ne semble pas sur l'iPhone 4 (même version d'iOS) ou dans Chrome.
• Cela provoque des problèmes majeurs dans Safari 5.1 (j'utilise Windows).

Answer 1

Pour résoudre ce problème de rendu que je devais déclencher l'accélération matérielle sur d'autres éléments sur la page qui ont été enrubannage, le contenu. Dans les cas de ce site était #main-content et #footer.

This site m'a donné l'idée d'essayer d'accélérer d'autres éléments sur la page et cela a fonctionné!

Answer 2

Avez-vous essayé?

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

ou:

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