CSS 상자 그림자 및 천이가있는 이물질

이것은 Firefox, IE 및 Safari에서 작동하지만 Chrome에서는 아티팩트 (선)가 표시됩니다. hover, box-shadow 및 transition과 같은 간단한 CSS입니다.CSS 상자 그림자 및 천이가있는 이물질

Chrome Artifacts (black lines)

html로는 주기율표의 표현이며, 마우스가 요소 그것은 '빛'에 놓을 때마다. HTML의 일부는 여기에서 확인할 수 있습니다. Periodic Table. Chrome에서 증상이 중복됩니다.

내가 뭘 잘못하고 있니?

출처

2012-10-21 Shay Cojo

축소 된 테스트 사례를 만들고이 문제를 재현 할 수있는 최소 코드 양을 찾으십시오. – bookcasey

괜찮아, 나는 그걸로 돌아올거야. –

Google 크롬 (최신 버전)을 사용 중이며 언급하신 문제가 표시되지 않습니다. 아마도 Chrome 자체의 문제 일 수 있습니다 (적어도 이전 버전). Chrome을 사용하거나 Chromium bugs list에 문제를 게시하십시오.

편집 : This may be your problem.

(또한, 요소 내부의 텍스트는 내가 눈치 숫자가 문자로 라인에 screenshot-. 이것은, 당신이 언급 한 문제가되지 않습니다 게시 뭔가처럼 보이지 않습니다.)

출처

2012-10-21 17:14:27

동의, Chrome 23을 사용 중이므로 아무런 문제가 없습니다. (Win7 x64) – Eric

Mac OS X ML에서 Chrome 22를 사용하지도 않습니다. – Alex

직장과 집에서 최신 크롬을 사용하고 있습니다. 직장에서 나는 문제를 재현 할 수있다. 집에서 'Ctrl +'로 수동으로 확대하면 재현 만 할 수있다. 또한 비트 맵 배경을 단색 (예 : # 333)으로 변경하면 아티팩트가 재생산되지 않습니다. 하드웨어 가속 및 텍스처 매핑과 관련이 있다고 가정합니다. Chrome에 버그를 신고해야합니까? –

이 모습을 위에서 언급 한 것처럼 사용자/스크립트 오류가 아니라 브라우저의 버그 이상입니다. 다른 브라우저에서 테스트하고 Chrome을 업데이트하면 캐시가 삭제됩니다. 더 이상 할 수 없습니다.

출처

2012-10-21 17:32:29 tobspr

Btw. 당신은 당신의 CSS minimaly를 편집 할 수 있습니다. 예를 들면 1Pixel만큼 그림자를 늘리면 고칠 수 있습니다. – tobspr

td에서 중첩 된 div에서 여백을 제거하면 아티팩트가 최소화되지만 여전히 존재한다는 것을 알게되었습니다. –

이것은 브라우저 버그 인 것 같습니다. 다음 Chromium 버전을 기다리는 중 (잘하면)이 문제를 해결할 것입니다. – tobspr

CSS 상자 그림자 및 천이가있는 이물질

답변

관련 문제