Search code examples
cssgoogle-chromewebkitchromium

Chrome bug display lines with box shadow


I noticed the following bug in Google Chrome while developing a website. The logos and text has been changed for obvious reasons.

Normal Display :

Normal display

After the bug appears display: (notice the gray lines under the navbar)

Buggy display

Context :

  • At first load, the pages are always normal. The bug appears only when I scroll down then up multiple times. It is not always the same lines, and keep changing positions when I keep scrollin up/down. But always the same size of lines and same color.

  • When I removed the box-shadow of the navbar, the lines do not appear anymore.

  • The bug only appear in Google Chrome, not in Firefox nor Edge (can't try in Safari).

  • I got a nvidia GPU on Windows 10.

  • It is definitely due to the box shadow because I can reproduce the bug in other websites by adding this line of CSS (example in SO website below).

SO bug

Lines of code involved :

box-shadow: 0 1px 0 0 rgba(0,0,0,0.1)

Note : It still appears with 1 in opacity instead of 0.1.

The closest I found was this issue : Strange diagonal lines in Chrome/Chromium (bug?)

But I am not sure it is the same thing since it is not the same appearance, the same pattern, and does not appear for the same reasons.

Does anyone faced the same thoughts and can affirm it is the same issue / found a fix of this bug or is it relevant to report it to Chrome ?


Solution

  • I had a similar issue in Chrome, where changes in the box-shadow on an input with :focus state would 90% of the time show a line underneath it: input bug with box-shadow

    What fixed it for me was adding position:relative to the element with the box-shadow property.