Material-design-lite: Mal posicionamiento de la información sobre herramientas
Se trata más de un caso límite pero, sin embargo, está ocurriendo en una aplicación que estoy desarrollando actualmente. Este escenario solo ocurre si hay una barra de desplazamiento y el elemento en cuestión tiene una traducción aplicada a través de CSS.
Ver ejemplo aquí (pase el cursor sobre el cuadro rojo)
Algo como esto teóricamente solucionaría el problema (creo)
let rect = el.getBoundingClientRect();
let left = rect.left + window.pageXOffset;
let top = rect.top + window.pageYOffset;
// now we have a more accurate representation of the current top / left coords
brandonjpierce
Todos 3 comentarios
Error interesante. Puedo confirmar que está sucediendo debido a la transformación, pero no entiendo _por qué_. Esto debe abordarse ya que podría ser algo bastante común ahora con el reciente impulso de animaciones por parte de la web.
Garbee
en 8 jul. 2015
¡HASTA!
El comportamiento observado es correcto según la especificación CSS :
Para los elementos cuyo diseño se rige por el modelo de cuadro CSS, cualquier valor que no sea ninguno para la transformación da como resultado la creación de un contexto de apilamiento y un bloque contenedor. El objeto actúa como un bloque contenedor para descendientes de posición fija.
Nuestra información sobre herramientas se coloca usando position: fixed . Eso significa que, al aplicar una transformación, incluso si es un NOP, movió el origen para un posicionamiento fijo.
La solución fácil es mover la información sobre herramientas a otro contenedor (o body ).
surma
en 9 jul. 2015
Mmm, muy interesante. Al menos ahora lo sabemos y podemos señalar a las personas aquí si vuelve a surgir. ¡Gracias por hacer la investigación @surma!
Garbee
en 9 jul. 2015
Temas relacionados
adiramardiani
·
4Comentarios
dryror
·
5Comentarios
rafaelcorreiapoli
·
3Comentarios
s-a
·
5Comentarios
DeepSwami
·
3Comentarios
Comentario más útil
¡HASTA!
El comportamiento observado es correcto según la especificación CSS :
Nuestra información sobre herramientas se coloca usando
position: fixed. Eso significa que, al aplicar una transformación, incluso si es un NOP, movió el origen para un posicionamiento fijo.La solución fácil es mover la información sobre herramientas a otro contenedor (o
body).