Faites défiler les ombres ? Parallaxe CSS pure ? Reprise du jeu.

chris en cours faire défiler les ombres l'un de ses CSS-Tricks préférés de tous les temps. Léa Vérou popularisé l'approche CSS pure utilisant quatre dégradés d'arrière-plan en couches avec quelques astucieux background-attachment la magie. Le résultat est une interaction de défilement fluide qui indique aux utilisateurs que du contenu supplémentaire est disponible dans un conteneur déroulant.

Un seul problème : il cassé dans Safari iOS 13. Un jour, tout allait bien. Le suivant, pas tellement. Et ce n'était pas la seule chose affectée. Effet de parallaxe CSS uniquement de Keith Clark a également cessé de travailler à ce moment-là.

Eh bien, lecteur Ronald a écrit dans dire que tout fonctionne à nouveau ! En fait, j'écris ceci sur mon iPad (Safari 15.5) en ce moment et la démo de Chris est plus nette que jamais. Il en va de même pour Keith démo originale.

Alors, qu'est-ce qui l'a cassé? Nous ne savons toujours pas. Mais le Notes de version de Safari 13 proposer des indices :

• Ajout de la prise en charge du défilement accéléré à un doigt vers toutes les images et overflow:scroll éléments éliminant le besoin de set-webkit-overflow-scrolling: touch.
• Modification du comportement par défaut sur iPad pour les pages Web larges avec des balises méta réactives nécessitant un défilement horizontal. Les pages sont mises à l'échelle pour empêcher le défilement horizontal et tout texte est redimensionné pour préserver la lisibilité.

Quand a-t-il été réparé et qu'est-ce qui l'a réparé ? Eh bien, du côté de l'ombre du défilement, le Safari 15.4 inclus quelques travaux sur background-attachment: local ça a peut-être fait l'affaire. Côté parallaxe, Safari 14.1 ajoutée prise en charge des propriétés de transformation individuelles… alors peut-être que ça ?