奇妙な斜線（バグ？）

私はCSSフィルター、影、変形、SVG（または類似）を使用すると、私のクロム/クロムは不思議な斜めの線を示しています。奇妙な斜線（バグ？）

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

を

Firefox（Windows）/ Canary Chromeのエラーはありません。58. Chrome 56およびChromium 58（Windows）のエラー。

このペンで

、ocurrs（最後に、タイトルにあるスイッチ）このエラー： https://codepen.io/manz/pen/jyYKJo

それがどんなオプションを無効にすることによって解決される既知のバグか、いくつかの問題だ場合は誰でも知っていますか？

出典

2017-01-30 Manz

我々は現在、同じ問題を抱えている、消えるように見えるときsvgsが含まれているページ上の特定の要素DOMから削除されますが、SVGだけを削除しても必ずしも機能しません。問題を解決するために、一見無作為な要素の組み合わせを修正することがあります。私たちのフレームワークで構築されたすべてのサイトに大きな影響を与えているので、私が解決策を見つけることができたらここに戻ってきます。これは、コード変更なしで最近起こったばかりなので、間違いなくそれを引き起こしたブラウザの更新です。現在Chrome上58.0.3029.81 – jonhobbs

私はChromeの最新バージョン（58.0.3029.110）でこの不具合が発生しているのを見ています。これはすべてのハードウェアで発生しますか？ auth0.comのもう1つの例があります： – doeke

Chromeの最終更新後に以前になかったサイトで、これらの対角線をどこからでも見つけ出し始めました。それは私の非モバイルデバイスすべてで起きています。それぞれのデバイスはハードウェアが大きく異なるため、間違いなくChromeのものです。 – DavidB

それはほぼ確実に特定のNVidiaのGPUに特異的であると思われるこのクロム/クロムラスタライズバグ、です：

Issue 691262 Corrupted background with GPU rasterization。
その上に示されているように

出典

2017-06-14 12:55:57

コメントに記載されている修正が私のために働いた：https://bugs.chromium.org/p/chromium/issues/detail?id=691262#c32 –

私はChromeで同じ問題を抱えていましたが、最終的にsvgファイルをクリーンアップすることで問題が解決されました。私はSVGO https://github.com/svg/svgoを使用しました。

出典

2017-05-04 14:09:42

現在、私はChrome 58.0.3029.96/Windows 10を使用しています.SVG最適化/非最適化でも同じ問題が発生します。最初は、アニメーションの最後で、うまく動作し、対角線で表示されます。 – Manz

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

出典

2017-10-14 13:35:53

答えて

関連する問題