Materialize: Waves buttons are extremely blurry every here and there

Created on 1 Dec 2016 · 12Comments · Source: Dogfalo/materialize

I didn't do anything special, you check it out on yooocan.com.
Sometimes the buttons are extremely blurry!

Refreshing the page usually work:

Any clue why does it happen?

Source

gdoron

Most helpful comment

I can reproduce this issue in a Fiddle. It seems the border-radius transition is crucial for me. Adding

.waves-effect {
  will-change: initial !important;
}

Removes the blur.

benelliott on 9 Dec 2016

👍2

All 12 comments

Can't reproduce the error. Have you tried using another browser already?

tomscholz on 2 Dec 2016

Since it's reproduced seldomly, it doesn't surprise me you could not reproduced it.
I only saw it on chrome since I only use chrome.
But I saw it on another developer too (again chrome).

Sorry, but that's all I got.

gdoron on 2 Dec 2016

I'm encountering this too, especially on buttons created using the Material Icons font. It seems to only occur on Chrome and seems like it's a browser rendering issue.

benelliott on 9 Dec 2016

Can't reproduce.

Chrome Version 55.0.2883.75 (64-bit) Linux

kmmbvnr on 9 Dec 2016

I can reproduce this with Chrome 54.0.2840.99 and 55.0.2883.75 on Windows 7 x64 (more than one machine). It seems to be a problem with the will-change attribute as overriding it (e.g. with will-transform: initial !important) solves the issue for me.

benelliott on 9 Dec 2016

👍1

I can reproduce this issue in a Fiddle. It seems the border-radius transition is crucial for me. Adding

.waves-effect {
  will-change: initial !important;
}

Removes the blur.

benelliott on 9 Dec 2016

👍2

@benelliott any idea why I see it just every here and there?
Same machine and browser.

Anyway, @Dogfalo probably should be aware to your findings.

Thanks a ton!

gdoron on 9 Dec 2016

Nope - do you have a lot of animations on container elements in your page? That seemed to be crucial to reproducing the error to me.

Out of curiosity, does the button look blurry to you on my fiddle?

No worries - I found your issue after looking for a solution myself!

benelliott on 9 Dec 2016

@benelliott yes it is blurry, 100% of the times, which made me wonder why.
And no, I don't have animations.
You can check https://yooocan.com and see for yourself.

gdoron on 9 Dec 2016

None of your buttons are blurry for me! :confused:

benelliott on 9 Dec 2016

@benelliott Somehow, I'm not sad hearing that 😄
Thanks buddy!

gdoron on 9 Dec 2016

Fixed in 53eaec4.

I removed the will-change as it sometimes causes weird issues like this. Also watch out for transform: translate3d which also can cause this issue.