En testant mon site sur un appareil iOS, j'ai réalisé qu'une transition particulière, que j'utilisais pour animer le changement de la background-color
d'un div
, avait l'air très agitée. Au début, je pensais que c'était la faute de l'appareil, mais quand j'ai testé plus tard sur quelques autres appareils plus récents, le résultat était le même.
J'ai fait des searchs et j'ai découvert qu'il s'agit d'un problème bien connu, et que tout ce que je dois faire pour améliorer la qualité de l'animation est d'inciter iOS à activer l'accélération matérielle. Cette réponse m'a montré comment:
-webkit-transform: translate3d(0, 0, 0);
Ajoutant ce style à la div
complètement lissé la transition. Cependant, il a eu l'effet secondaire involontaire en faisant tous les éléments qui avaient la position: fixed
pour cesser de fonctionner correctement, et se comporte plutôt comme s'ils avaient la position: absolute
place.
Voici une capture d'écran de ma page, légèrement défilée, visualisée sur un iPad sans le style:
Et voici une capture d'écran de la page défilée du même montant, mais avec le style:
La navigation est, en fait, toujours là. Vous avez juste à faire défiler pour le voir. Il n'est plus fixé à la window.
Voici une démo qui démontre le bug en action:
html, body { width:100%; height:100%; margin:0; padding:0; transform: translate3d(0, 0, 0); } #nav{ width:100%; height:10%; position:fixed; top:0; left:0; background-color:red; } #content { width:100%; height:500%; }
<!DOCTYPE html> <html> <body> <nav id="nav"> </nav> <main id="content"> </main> </body> </html>
La navigation rouge devrait être visible même après avoir fait défiler vers le bas. Selon votre browser, cela peut fonctionner correctement ou non. Suppression du problème -webkit-transform: translate3d(0, 0, 0);
le style le fait fonctionner correctement dans tous les browsers.
C'est l' un des fils que j'ai trouvés qui confirment mon soupçon que ce n'était pas spécifique à un cas. Toute page avec ce style et cette position: fixed
ne fonctionne pas correctement.
Donc ma question est, comment puis-je activer l'accélération matérielle et en même time avoir des éléments avec la position: fixed
fonction position: fixed
correctement?