CODEWITHSUNDEEP
google-chromewebkitchromiumblink
Manz
Manz

Reputation: 988

Strange diagonal lines in Chrome/Chromium (bug?)

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?

Upvotes: 27

Views: 3909

Answers (3)

Jose R. Perez
Jose R. Perez

Reputation: 21

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;
}

Upvotes: 1

B Thomas
B Thomas

Reputation: 166

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.

Upvotes: 15

Jennifer L
Jennifer L

Reputation: 171

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.

Upvotes: -1

Related Questions