web-dev-qa-db-ja.com

Chrome / Chromiumの奇妙な対角線（バグ？）

CSSフィルター、シャドウ、変換、SVG（または同様のもの）を使用すると、Chrome/Chromiumに奇妙な対角線が表示されます。

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

Diagonal lines error Chrome/Chromium

Firefox（Windows）/ Canary Chrome 58でエラーなし。Chrome 56およびChromium58（Windows）でエラー。

このペンでは、このエラーが発生します（最後に、タイトルをオンにすると）： https://codepen.io/manz/pen/jyYKJo

オプションを無効にすることで解決される既知のバグまたは問題であるかどうかを誰かが知っていますか？

google-chromewebkitchromiumblink
27
Manz

これはほぼ間違いなくこのChrome/Chromiumラスタライズのバグであり、特定のNVidiaGPUに固有のようです。

問題691262 GPUラスタライズによる背景の破損 。

15
B Thomas

上に示したように、これはGPUの問題ですが、一時的な回避策は私にとってはうまく機能します。

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;
}
0
Jose R. Perez