Text is blurry

[yunyu]

Come to think of it, the edges of the tooltip are blurry too.

[ghosh]

@yunyu Is it blurry for you on the Microtip website too? - https://github.com/ghosh/microtip

[yunyu]

@ghosh Nope, but it seems to happen with some other fonts (which make the height/width of the :after an odd number).

[ghosh]

@yunyu Ok, it's a quite a common issue caused by CSS transitions. Will look into it.

[yunyu]

I think a workaround would be to add some classes that make the paddings in half pixels

[fireswork]

+1, i have this problem too

[Muhnad]

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.

[bilalmalkoc]

Any update for this problem? It happens with position: absolute and translate3d

[Muhnad]

Hey @bilalmalkoc, could you pass me a link, please? it'll help me alot

[bilalmalkoc]

@Muhnad hello. Check share buttons on this page please. Change position to right from source coude. It happens only right.

[ugurcatak]

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); }

[aleksandras-va]

Omitting will-change: transform mitigates the issue. This may impact performance in some way though.