CSS

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

Chris está llamando 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 experiencia de desplazamiento fluida que da a los usuarios una pista de que hay contenido adicional en un contenedor desplazable.

Solo un problema: se rompió Safari iOS 13. Un día todo estaba bien. El siguiente, no tanto. Y eso no fue lo único afectado. El efecto de paralaje de Keith Clarke solo para CSS también dejó de funcionar en ese momento.

Bueno, el lector Ronald escribió para decir que todo está funcionando de nuevo. 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. como es el de keith demostración original.

Entonces, ¿qué lo rompió? Aún no lo sabemos. Pero Notas de la versión de Safari 13 ofrecer pistas:

  • Se agregó soporte para el desplazamiento acelerado con un dedo de todos los marcos y overflow:scroll elementos que eliminan la necesidad de set-webkit-overflow-scrolling: touch.
  • Se modificó el comportamiento predeterminado del 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, Safari 15.4 incluido poco trabajo en background-attachment: local esto podría haber funcionado. En el lado del paralaje, Safari 14.1 adicional soporte para propiedades de transformación individuales … ¿así que tal vez esto?

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Botón volver arriba