CSS - 오버플로가 아닌 보이는 요소 - 글리치 - 설명 할 수없는 이상한 시각적 버그

Question

안녕하세요. 저는 이처럼 버그를 본 적이 없으며 어디서부터 시작해야할지 몰라요. 아무도 내 생각을 말해 줄 수 있니? Javascript, CSS, 브라우저 또는 내 컴퓨터입니까?

내가 버그를 설명하기 위해 할 수있는 최선은 단지 비디오를 보는 것입니다.

비디오 1에 표시되는 내용은 최대 높이를 가진 컨테이너입니다. 그 높이에 도달하면 오버 플로우가 발생합니다. 스크롤을 시작하면 화면 하단에 버그가 표시됩니다.

이 간헐적 버그 내가 상단에있는 "+"아이콘을 스크롤 할 때 때로는 글리치는 아이콘은 단지 배경 이미지 PNG 파일입니다

(I 비디오 2에서 이것을 보여 주었다).

브라우저는 크롬입니다 - 버전 60.0.3112.113

Video 1

(2017 8월 19일) Video 2

편집 : 내가 생각하는 세 번째 비디오가 더 명확하게

을 문제를 보여 추가

Video 3

편집 (2010 년 8 월 19 일) : 저는 0을 사용하고 있습니다. 내 CSS에및 position: sticky 내 첫 번째 추측은 그 속성과 관련된 버그라는 것입니다 ...하지만 여전히 그들을 제거한 후에도 여전히 동일한 문제가 있습니다.

Answer 1

이 문제가 발생하는 이유는 정확히 알 수 없지만 내 생각에 어떻게 든 관련이 있습니다. 자식 요소의 Z- 인덱스 어떤 이유로 브라우저가 혼란스러워지고 그 요소를 다시 칠하려고 시도 할 때 고장납니다.

하위 요소에 transform: translate3d(0,0,0)을 추가 했으므로이 문제가 해결되었습니다.