css - 크롬 position fixed 버그 해결 방법

2017년8월15일 업데이트 : translateZ(0) 여기에서 숫자를 전부 0으로 해놓으면 fixed 정의한 엘리먼트들이 ios에서 scrolltop 과 같이 스크롤이 빠르게 진행되다보면 fixed 레이어가 사라지게 된다. z-index가 안먹힌다.

translateZ(여기에)  fixed 한 엘리먼트의 z-index 값을 넣어준다.


크롬 브라우저에서 position값을 fixed로 만든 A라는 엘리먼트가 있는데 스크롤하다가 영상 오브젝트에 마우스 오버를 한 후 다시 스크롤을 하게 되면 A라는 엘리먼트 잔상이 영상 오브젝트 뒤에 생겨날 때가 있다.
그리고 분명 fixed 인데 미세하게 떨리면서 스크롤할 때마다 스크롤 방향으로 조금씩 떨리면서 움직인다.

해결방법은 간단하다. fixed라고 값을 준 css에 아래 값을 추가해주면 된다.

-webkit-transform: translateZ(0)

왜 이렇게 다시금 Z값을 초기화하는지는 모르겠지만 그래도 적용해보니 제대로 정상 작동하였다.

이유는 차차 연구할 예정이다.

크롬과 사파리에서 발견하였고 해외에서는 이슈사항으로 포럼에 올라오기도 하였다.
이슈 : https://code.google.com/p/chromium/issues/detail?id=288747

Subscribe
Notify of
guest

이 사이트는 스팸을 줄이는 아키스밋을 사용합니다. 댓글이 어떻게 처리되는지 알아보십시오.

4 댓글
Oldest
Newest
Inline Feedbacks
View all comments
webpyobum
webpyobum
9 years ago

와. 이걸로 크롬 잔상 이슈 해결봤습니다.
jquery로 애니메이션이나, video태그쓴 페이지에서 문제가 주로 발생했는데.
감사합니다.

mynain
mynain
9 years ago
Reply to  webpyobum

해결하셨다니 다행입니다.
저도 이 버그 때문에 이번 프로젝트때 한참 고생했다가 겨우 검색해서 해결했습니다.
ㅠㅠ

11
11
7 years ago

팁 감사합니다. 이상하게 안드로이드폰에서 스크롤할때마다 보톰에 포지션 픽스 준 요소가 바르르르 위아래로 떨면서 내려가서 깝깝했는데 덕분에 해결했습니다.

naminsik
naminsik
7 years ago
Reply to  11

이 버그 때문에 고생하셨군요 ㅠ 다음에 또 궁금한거 안풀리는거 있으시면 말씀하세용~ 찾아봐 드릴께요.

TOP