Search code examples
htmlcssgoogle-chromebox-shadow

Strange Box-shadow bug on Chrome 51 while scrolling

So while making a website I discovered a strange box-shadow bug on Chrome 51, my website has a fixed header with a box-shadow, and when I scroll up or down the box-shadow leaves some marks (horizontal gray lines) :

bug

Also I can't reproduce this bug on a jsfiddle (link of the fiddle) and on other browsers like Firefox or Internet Explorer.

Is it a bug? What could be the problem?

UPDATE 1

It seems to work on Chrome 49

Solution

  • I encountered this bug. I don't know what causes this but here's a simple way to fix it:

    Add 0.1px to the shadow's blur

    box-shadow: 0 2px 0.1px #yourcolor;

    The lines should disappear that way and the blur isn't really visible.