27

When I use CSS filters, shadows, transformations, SVG (or similar), my Chrome/Chromium shows a strange diagonal lines:

    filter:drop-shadow(0px 0px 10px #dce810);
    transform:skew(-15deg);

Diagonal lines error Chrome/Chromium

No error in Firefox (Windows) / Canary Chrome 58. Error on Chrome 56 and Chromium 58 (Windows).

In this pen, ocurrs this error (at end, when switch on title): https://codepen.io/manz/pen/jyYKJo

Does anyone know if it's a known bug or some problem that is solved by disabling any option?

Manz
  • 948
  • 12
  • 26
  • We are currently having the same problem and it seems to disappear when certain elements on the page which contain svgs are removed from the DOM, but removing just the SVG doesn't always work. Sometimes a seemingly random combination of elements can be fixed to solve the problem. It's massive issue for us affecting every site built with our framework so I'll be back on here if I can find a solution. It only started happening recently without any code changes so it's definitely a browser update that caused it. Currently on Chrome 58.0.3029.81 – jonhobbs May 11 '17 at 17:50
  • I'm still seeing this glitch on the latest version of Chrome (58.0.3029.110). Does this happen on all hardware? It's pretty annoying, here's another example on auth0.com: https://i.imgur.com/lGVaNeK.png – doeke May 30 '17 at 14:19
  • I started seeing these diagonal lines out of nowhere on sites that did not have them before after the last update to Chrome, and it is happening on all of my non-mobile devices, each of which has vastly different hardware so it's definitely a Chrome thing. – DaveTheMinion Jun 05 '17 at 01:01

3 Answers3

15

It's almost certainly this Chrome/Chromium rasterization bug, which appears to be specific to certain NVidia GPUs:

Issue 691262 Corrupted background with GPU rasterization.

B Thomas
  • 166
  • 1
  • 4
  • the fix listed in the comments worked for me: https://bugs.chromium.org/p/chromium/issues/detail?id=691262#c32 – Ben Boyle Aug 21 '17 at 23:53
1

As indicated above it is a GPU issue but the temporary workaround works great for me:

div {
    position: relative;
    z-index: 0;
}

div:before {
    content: '';
    display: block;
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: inherit;
}
Jose R. Perez
  • 21
  • 1
-1

I was having the same issue in Chrome but I finally found that cleaning up the svg file solved the issue. I used SVGO https://github.com/svg/svgo.

Jennifer L
  • 171
  • 1
  • 1
  • 6
  • 1
    At now, I use Chrome 58.0.3029.96 / Windows 10. Same issue with SVG optimized / unoptimized. At beginning, works fine, at end of animation, appears diagonal lines. – Manz May 10 '17 at 21:04