Lisser les transitions css dans iOS sans causer de position: éléments fixes à dysfonctionnement

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:

Pas de style


Et voici une capture d'écran de la page défilée du même montant, mais avec le style:

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?