Mientras haces scroll ya no hay más eventos de ratón 20.10.15
Las novedades en los navegadores sobre cómo manejan los eventos de ratón y lo asociado a ello (estilos o javascript) mientras se hace scroll en la página
Mientras haces scroll ya no hay más eventos de ratón
Una característica o función tradicional de los navegadores era (y uso el pasado) que mientras se realizaba scroll (desplazamiento de la página) calculaba y actualizaba la posición del puntero cada 100 ms (milisegundos)
Y al actualizar la posición del ratón también suponía la actualización de los estilos implicados por la pseudoclase :hover
así como todos los eventos del tipo mousemove, mouseover, mouseenter, mouseleave, mouseout
Este comportamiento en según qué situaciones incidía, para mal, en el funcionamiento del navegador (recursos para saber dónde está) y en la experiencia del usuario al desplazarse por la página (repaint y reflows o incluso clicks indeseados).
Para evitar los efectos derivados de esa actualización de posición del puntero se recurría a una serie de técnicas, como añadir un retraso de 100ms a las transiciones basadas en :hover
o incluso al uso de pointer-events: none;.
Algunas de estás técnicas puedes encontrarlas detalladas en estos artículos:
- A follow up to obtaining 60fps scrolling performance
- Scrolling at 60fps
- Avoiding Unnecessary Paints
- A Pinterest Paint Performance Case Study
- Parallax, performance, and the new Flickr Home Page
No más eventos durante el scroll
Bien. Pues nada de lo anterior es ya necesario. Un tuit de Paul Irish me psuo sobre la pista de esta novedad y mejora de los navegadores
This isn't necessary any longer. browsers will not apply :hover styles during scroll. chrome fixed this ~4 months ago. [1]
Como ves, Chrome hace un tiempo que implementó deshabilitar todo lo relativo a los eventos del ratón mientras se hace scroll.
¿Y el resto de navegadores?
- Internet Explorer 11: Envía eventos / actualizaciones :hover sólo si el ratón se mueve realmente, con algunas excepciones por razones de compatibilidad.
- Firefox: Envía eventos / actualizaciones del :hover después de transcurridos 100ms sin ningún scroll, pero no envía eventos mousemove al menos que el puntero del ratón se mueve realmente.
- Safari: Recientemente cambió a enviar eventos / actualización de :hover después de transcurridos 100ms sin ningún scroll.
Si quieres saber el comportamiento de tu navegador con el :hover
o los eventos del ratón mientras haces scroll puedes testearlo en esta página o en esta otra o en el siguiente pen:
See the Pen If Scroll... no mouse events by Kseso (@Kseso) on CodePen.
Puedes obtener más información en este hilo de los grupos de Google.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
en mobiles cuando haces scroll con el touch funciones como el parallax dejan de funcionar :'(
ResponderEliminarGracias por el dato, "Unknown"
EliminarSí, entre otras cosas ya conocía que hay navegadores, en sus versiones para móviles y para prevenir clicks indeseados, que mientras se está desplazando la página (al hacer "arrastre" por ejemplo) todos los eventos de ratón quedan en suspenso hasta que no termina el desplazamiento.
En el detalle del parallax no me había fijado.
Un saludo