microtip Text is blurry

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

Jun 07 '17 02:06 yunyu

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

Jun 07 '17 10:06 ghosh

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

Jun 07 '17 16:06 yunyu

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

Jun 07 '17 17:06 ghosh

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

Jun 07 '17 17:06 yunyu

+1, i have this problem too

Jun 23 '17 06:06 fireswork

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.

Jun 24 '17 16:06 Muhnad

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

Apr 28 '20 22:04 bilalmalkoc

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

Apr 29 '20 00:04 Muhnad

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

May 03 '20 10:05 bilalmalkoc

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

Oct 26 '21 23:10 ugurcatak

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

Apr 21 '22 13:04 aleksandras-va