Material-design-lite: Mau posicionamento das dicas de ferramentas
Mais um caso de ponta, mas ainda assim acontecendo em um aplicativo que estou desenvolvendo atualmente. Este cenário só acontece se uma barra de rolagem estiver presente e o elemento em questão tiver uma tradução aplicada via CSS.
Veja o exemplo aqui (passe o mouse sobre a caixa vermelha)
Algo assim teoricamente corrigiria o problema (eu acho)
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 comentários
Bug interessante. Posso confirmar que está acontecendo devido à transformação, mas não entendo _por que_. Isso deve ser abordado, pois pode ser uma coisa bastante comum sendo feita agora com o recente impulso de animações pela web.
Garbee
em 8 jul. 2015
TIL!
O comportamento observado está correto de acordo com a especificação CSS :
Para elementos cujo layout é regido pelo modelo de caixa CSS, qualquer valor diferente de none para a transformação resulta na criação de um contexto de empilhamento e um bloco de contenção. O objeto atua como um bloco de contenção para descendentes posicionados fixos.
Nossas dicas de ferramentas são posicionadas usando position: fixed . Isso significa que, ao aplicar uma transformação – mesmo que seja um NOP – você moveu a origem para posicionamento fixo.
A solução fácil é mover a dica de ferramenta para outro contêiner (ou body ).
surma
em 9 jul. 2015
Hum, muito interessante. Pelo menos sabemos agora e podemos apontar as pessoas aqui se surgir novamente. Obrigado por fazer a pesquisa @surma!
Garbee
em 9 jul. 2015
Questões relacionadas
samuelcarreira
·
4Comentários
arturgspb
·
3Comentários
itisparas
·
3Comentários
raffomania
·
4Comentários
lgg
·
3Comentários
Comentários muito úteis
TIL!
O comportamento observado está correto de acordo com a especificação CSS :
Nossas dicas de ferramentas são posicionadas usando
position: fixed. Isso significa que, ao aplicar uma transformação – mesmo que seja um NOP – você moveu a origem para posicionamento fixo.A solução fácil é mover a dica de ferramenta para outro contêiner (ou
body).