관리 메뉴

web sprit

[CSS3] 아이폰 사파리 안나오는 버그 & 크롬 fixed 본문

웹5/CSS3

[CSS3] 아이폰 사파리 안나오는 버그 & 크롬 fixed

커드만 2021. 5. 17. 16:18

문제점

Swiper js를 사용하여 모바일의 슬라이드를 만들어 보았다. 문제는 
스크롤 시 반복되는 사로 슬라이드가 있는데 스크롤을 위에서 아래로 내리고 다시 위로 올리면 
슬라이드를 조작하는 nav 버튼이 사라져서 안보인다는 것이 문제다. 안보여도 누르면 기능은 동작한다.

해결방법

z-index문제일거라면 큰 오산이다. 이미 z-index의 값은 슬라이드 움직이는 리스트보다
nav가 더 크게 잡혀있었다.
검색을 하다가 우연히 발견한 크롬fixed 버그에 대한 내용이다.
크롬에서 fixed를 사용하면 사라지는 버그가 있다고 한다.(?) 우선 한번 그대로 아래와 같은 내용을 넣었다.

.target{
	-webkit-backface-visibility:hidden;
	-webkit-transform:translateZ(0);
	-webkit-transform:translate3d(0, 0, 0);
}

넣고 확인하니 잘나온다. 정말.... ㅎ

우선 보안으로 로컬test는 못했지만 기존 swiper의 슬라이드 부분에 translate3d부분이 먹어져 있는데
이 부분때문이 아닌가 싶다. 일종의 버그이긴한데 슬라이드 리스트를 감싸고있는 부모(ul)화 nav태그가 같은 선상의 형제로 되어 있고  z-index가 더 높은데 슬라이드에만 -webkit-transform:translate3d(0, 0, 0); 값이 있고 nav에는 없어서 생기는 버그일꺼란 생각이 든다.

Comments