Open yunyu opened 7 years ago
@yunyu Is it blurry for you on the Microtip website too? - https://github.com/ghosh/microtip
@ghosh Nope, but it seems to happen with some other fonts (which make the height/width of the :after an odd number).
@yunyu Ok, it's a quite a common issue caused by CSS transitions. Will look into it.
I think a workaround would be to add some classes that make the paddings in half pixels
+1, i have this problem too
Hey @yunyu @fireswork
Thanks for submitting the issue but it's will be great if you provide an example of the issue and we will try to fix this ASAP.
Any update for this problem? It happens with position: absolute and translate3d
Hey @bilalmalkoc, could you pass me a link, please? it'll help me alot
@Muhnad hello. Check share buttons on this page please. Change position to right from source coude. It happens only right.
translate3d makes it blurry.
[role~="tooltip"][data-microtip-position="top"]:hover::after { transform: translate3d(-50%, -5px, 0); } [role~="tooltip"][data-microtip-position|="top"]::after { transform: translate3d(-50%, 0, 0); }
Omitting will-change: transform
mitigates the issue. This may impact performance in some way though.
Come to think of it, the edges of the tooltip are blurry too.