Materialize: Shadow glitch on latest chrome release

[rsella]

In the latest chrome version (v. 58) the on hover animation of card component is bugged.
On firefox and edge the animation works properly so I think it's a browser related bug.

A related issue (now closed) is #4357 .

A related issue on chrome bug tracker is https://bugs.chromium.org/p/chromium/issues/detail?id=713674

Any idea on how to solve or we have to wait 'till chrome team fix that?

Best regards

[DanielRuf]

So far the bugreport for Chromium looks like we have to wait for a fix from them and we can not solve this directly.

[rsella]

On the original thread on chrome tracker they published a quick fix (temporary):
Apply that on materialize css like that:

.hoverable:hover {
  transition: box-shadow .25s;
  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19), 0 0 0 0 rgba(0, 0, 0, 0);
}

and the issue is solved. For now that works, waiting for them to fix that on browser side.
The fix is adding the third value on box-shadow.

Hope this helps someone if needed.

Best regards

[DanielRuf]

The fix is adding the third value on box-shadow.

I see. We should monitor the bugreport and keep this issue open with the temporary fix until a patch for Chrome has landed.

[tomscholz]

This is fixed in the latest canary build, but I think we can keep this open until it arrives also in the main build

[DanielRuf]

Perfect, thanks for the heads up.

[ncovercash]

Does the above code by @rsella have adverse effects in other browsers? If it fixes the issue in chrome, why not implement it?

[DavHanna]

Just wanted to point out the this issue exists also in Opera. I know that the problem is not with Materialize, but it would be nice if someone can commit a quick fix for this until the 2 browsers are fixed.
After all, Google Chrome alone is used by more than half of all internet users, so it is indeed worth the fix, we are not talking IE6 here.

[DanielRuf]

Just wanted to point out the this issue exists also in Opera.

Not a surprise as Opera uses Chromium / Blink for rendering ;-)

The fix should be available in Chrome 59.0.3071.61, the current stable is 59.0.3071.104 (a few patches further).

Confirmed, looks fine in Chrome 59 (stable).