이상한 대각선

내가 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 on 58.0.3029.81 – jonhobbs

Chrome의 최신 버전 (58.0.3029.110)에서이 결함이 계속 발생합니다. 이것은 모든 하드웨어에서 발생합니까? auth0.com에 대한 또 다른 예가 있습니다. https://i.imgur.com/lGVaNeK.png – doeke

Chrome을 마지막으로 업데이트 한 후 이전에 없었던 사이트에서 이러한 대각선을 보지 못했습니다. 모바일 장치가 아닌 다른 모든 장치에서 일어나고 있습니다. 각 장치는 하드웨어가 매우 다르므로 Chrome과 관련이 있습니다. – DavidB

그것의 거의 확실 특정 엔비디아의 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

답변

관련 문제