Décalage de défilement sur iPad Safari : « translate3d(0, 0, 0) » peut-il corriger le défilement saccadé ?

Le décalage de défilement de iPad Safari résolu avec la transformation Translate3D

Lors du développement d'applications Web pour iPad Safari, de vastes zones de défilement peuvent présenter un comportement particulier lorsqu'elles sont désactivées Les éléments -screen n'apparaissent qu'après un délai notable lors du défilement. Cette irrégularité découle des efforts de conservation de la mémoire de l'iPad Safari.

Heureusement, une solution consiste à inciter le navigateur à utiliser l'accélération matérielle. Ceci peut être réalisé en appliquant une transformation tridimensionnelle vide :

-webkit-transform: translate3d(0, 0, 0);

Plus précisément, en appliquant cette transformation aux éléments enfants avec position:relative; Les déclarations ou à tous les éléments enfants améliorent la réactivité du défilement. Bien qu’il ne s’agisse pas d’une solution universelle, cette solution est très efficace pour résoudre les problèmes dans la plupart des cas. La technique est créditée à l'article "iOS 5 Native Scrolling–Grins & Gotchas".

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!