Strange diagonal lines in Chrome/Chromium (bug?)

Question

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

    filter:drop-shadow(0px 0px 10px #d         


        

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