Text in Tooltip component is blurry on secondary Retina Screen

[Discordius]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

When using a tooltip component, on my secondary Retina screen, I expect the tooltip text to be sharp.

Current Behavior

Instead, when I use a Tooltip component and move the window to my second screen, the tooltip text turns out to be blurry. Here is a comparison (the second one is blurry):

Steps to Reproduce (for bugs)

1. Use a Tooltip component
2. Get a secondary Retina screen
3. Hover over element on secondary screen
4. See text as blurry (you might need to adjust the position slightly)

Here is a minimal reproduction, in which the blurriness is less pronounced than in my production use-case, but still noticeable: https://codesandbox.io/s/wn9kjp753k

This is all probably related to this problem: https://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/ Though I am unsure why this problem happens, since we are only translating in integer increments. There is some chance this happens because of the scale animation or something in that space, though I haven't been able to fix it.

Context

I've tried to use Tooltips on my site, but on my secondary screens they were basically unreadable at small text sizes. Here is an example:

Your Environment

Tech	Version
Material-UI	v1.3.0
React	v16.4.1
browser	Chrome(67)
etc	MacOS, latest MacbookPro

[oliviertassinari]

@Discordius As far as I know, we can do very little about how browsers render fonts. Any tips?

[Discordius]

Yeah, I am really not sure either.

I looked into it for a few hours, didn't really find any fixes except deactivating hardware-accelerated rendering, and then decided I will probably just leave it as is since only a relatively small number of users will be affected.

I then figured I would open an issue to let you know that I ran into the problem so you can keep track of it, but don't think it's super imperative to fix it. I increased the font-size on the affected font, which made the text at least readable on my device.

[joarwilk]

@oliviertassinari This can be fixed by applying transform: translateZ(0) on the affected element.

A lot of elements in Material UI suffer from the same issue in current master.

[oliviertassinari]

@joarwilk I think that so far, we have decided to ignore the problem. Be careful with transform: translateZ(0) it might break the z-index on Firefox.

[lionel-rowe]

I'm still having this issue in Chrome, but weirdly only when I try to apply a filter: drop-shadow to the tooltip.

Here's a workaround:

.my-tooltip-class::after {
	content: '';
	filter: var(--my-drop-shadow);
	display: block;
	position: absolute;
	inset: 0;
	background: inherit;
	border-radius: inherit;
	z-index: -1;
}

.my-tooltip-class:not(.class-if-tooltip-has-arrow)::after {
	margin: inherit;
}