¿Sombras de desplazamiento? ¿Paralaje CSS puro? Juego de nuevo.

Chris llamadas sombras de desplazamiento uno de sus trucos CSS favoritos de todos los tiempos. lea verou popularizado el enfoque de CSS puro utilizando gradientes de fondo de cuatro capas con algunos ingeniosos background-attachment magia. El resultado es una interacción de desplazamiento ingeniosa que brinda a los usuarios una pista de que hay contenido adicional disponible en un contenedor desplazable.

Solo un problema: es no tenía dinero en Safari iOS 13. Un día todo fue bien. El siguiente, no tanto. Y eso no fue lo único afectado. Efecto de paralaje solo CSS de Keith Clark también dejó de funcionar en ese momento.

Bueno, lector Ronald escribió en decir que todo está funcionando una vez más! De hecho, estoy escribiendo esto en mi iPad (Safari 15.5) ahora mismo y la demostración de Chris se ve tan nítida como siempre. También lo es Keith demo original.

Entonces, ¿qué lo rompió? Todavía no lo sabemos. Pero el Notas de la versión de Safari 13 ofrecer pistas:

• Se agregó soporte para el desplazamiento acelerado con un dedo a todos los marcos y overflow:scroll elementos que eliminan la necesidad de set-webkit-overflow-scrolling: touch.
• Cambió el comportamiento predeterminado en iPad para páginas web amplias con metaetiquetas receptivas que requieren desplazamiento horizontal. Las páginas se escalan para evitar el desplazamiento horizontal y se cambia el tamaño de cualquier texto para preservar la legibilidad.

¿Cuándo se arregló y qué lo arregló? Bueno, en el lado de la sombra de desplazamiento, el Safari 15.4 incluido algo de trabajo en background-attachment: local eso puede haber hecho el truco. En el lado del paralaje, Safari 14.1 adicional soporte para propiedades de transformación individuales... ¿así que tal vez eso?