Material-design-lite: Mauvais positionnement des info-bulles
Plus un cas marginal mais qui se produit néanmoins dans une application que je développe actuellement. Ce scénario ne se produit que si une barre de défilement est présente et que l'élément en question a une traduction appliquée via CSS.
Voir exemple ici (survolez la case rouge)
Quelque chose comme ça résoudrait théoriquement le problème (je pense)
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
Tous les 3 commentaires
Bug intéressant. Je peux confirmer que cela se produit en raison de la transformation, mais je ne comprends pas _pourquoi_. Cela devrait être résolu car cela pourrait être une chose assez courante qui se fait maintenant avec la récente poussée des animations par le Web.
Garbee
le 8 juil. 2015
TIL !
Le comportement observé est correct selon la spécification CSS :
Pour les éléments dont la disposition est régie par le modèle de boîte CSS, toute valeur autre que none pour la transformation entraîne la création à la fois d'un contexte d'empilement et d'un bloc contenant. L'objet agit comme un bloc conteneur pour les descendants à position fixe.
Nos infobulles sont positionnées à l'aide position: fixed . Cela signifie qu'en appliquant une transformation - même s'il s'agit d'un NOP - vous avez déplacé l'origine pour un positionnement fixe.
La solution simple consiste à déplacer l'info-bulle vers un autre conteneur (ou body ).
surma
le 9 juil. 2015
Hum, très intéressant. Au moins, nous savons maintenant et pouvons diriger les gens ici si cela se reproduit. Merci d'avoir fait la recherche @surma !
Garbee
le 9 juil. 2015
Questions connexes
adiramardiani
·
4Commentaires
raffomania
·
4Commentaires
facekapow
·
5Commentaires
traviskaufman
·
5Commentaires
ktodyruik
·
5Commentaires
Commentaire le plus utile
TIL !
Le comportement observé est correct selon la spécification CSS :
Nos infobulles sont positionnées à l'aide
position: fixed. Cela signifie qu'en appliquant une transformation - même s'il s'agit d'un NOP - vous avez déplacé l'origine pour un positionnement fixe.La solution simple consiste à déplacer l'info-bulle vers un autre conteneur (ou
body).