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
10 years ago

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

mynain
mynain
10 years ago
Reply to  webpyobum

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

11
11
7 years ago

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

naminsik
naminsik
7 years ago
Reply to  11

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

TOP