Material-design-lite: Tooltips are blurry on Chrome 53

[anirudhb]

I real quick looked on getmdl.io and apparently, when I hover over tooltips, they are _really_ blurry. However I found that toggling removing the will-change: transform CSS property seemed to fix it. I'll submit a pull request real soon.

I am using Ubuntu 16.04 LTS on Chrome 53 (unstable/canary/beta)

[anirudhb]

Okay, submitted a pull request.

[leipert]

Starting with chrome 53 we experience another issue related to the tooltips.
Once you hover a tooltip, a big blank space jumps into our datatable:

We do not experience this problem, if we disable the tooltip animation:

.mdl-tooltip.is-active {
    animation: none;
    transform: scale(1);
    opacity: 1;
    visibility: visible;
}

Unfortunately I am not able to provide a minimal example which shows this broken behaviour (but we experience it through all our apps)

[Garbee]

@leipert that issue is unrelated to the blurryness bit. Please file another issue with a minimal reproduction case otherwise there isn't much we can do on our end to look into it. There is no telling what custom code could be in play causing that, which is why we need a minimal reproduction case using vanilla MDL components.

Thank you.

[leipert]

I know that it is a different bug, just wanted to document it somewhere until a a minimal reproduction can be provided by us.

We are also experiencing the aforementioned behavior just on Non-Retina Displays attached to a Retina-Mac. Seems like some bug in the Chrome rendering engine.

For us disabling the animation fixed it. I try to provide a minimal example on the next weekend.

[UnnikrishnanBhargavakurup]

@leipert - I'm also facing the same issue, After I disabled the animation as you suggested it is working fine.

[olegtabu]

@leipert - thanks, this fixed same blinking tooltip issue. There is similiar issue with menu component, when its became visible a big blank space shifts datatable down. All this issues began exactly after chrome 53 update (on both windows 7 and ubuntu 16.04).

[MrOrz]

Though not using material-design-lite, we encountered the blinking issue as well when implementing a custom, animated radio button.

jsbin that reproduces the bug with minimal html & css: http://jsbin.com/vuseqav/4/edit?html,css,output

When the page is scrolled down a bit, hovering on the radio button causes the surrounding text to jump around. It happens only on Chrome 53, while Safari and Firefox runs normally. Interestingly, besides to css transition, removing the <input> or any CSS applied to <input> fixes the blinking issue as well. We believe it is a positioning / animation bug in Google Chrome.

We found that the blink does not happen in Google Chrome Canary 55.0.2882.0 (at least for the jsbin above). So we decided to remove the transition animation until Chrome stable reaches that version.

[okbel]

I can still reproduce this issue.

[DenysVuika]

The issue still can be reproduced, the workaround for me was:

.mdl-tooltip {
    will-change: unset;
}

[jonathan-gagne]

For tool tip blur issue into google chrome here is the solution!

.mdl-tooltip {
    will-change: unset;
}

Thank you DenisVuyka it was my nightmare!

[nikoTM]

Same happens with snackbar for me. Solution below.

.mdl-snackbar {
  will-change: unset;
}

[Garbee]

This issue has been resolved in Chrome itself (where the issue existed.) If you aren't running the latest stable version (55 at the time of writing) then the problem may persist. With that, plenty of people have repeatedly commented the exact fix needed for older versions of the engine that have the bug. So use that to solve the issue.

As this thread is increasingly just repeated comments of the fix code with no added benefit to anyone reading the thread, I have locked it to reduce the noise.

Thank you.