모바일 Safari에서 레이어의 부분적 렌더링 오류 해결

모바일 Safari에서 sticky 내비게이션을 구현할 때나 position: fixed를 선언하여 레이어를 만들 때, 해당 레이어가 부분적으로 렌더링이 되지 않아 뚫려보이는 오류가 발생한다. 오류를 해결하기 위해서는 아래 css를 추가하고, 탭 이벤트시 이벤트 방지를 선언해 주어야 한다.

css

#stickyNav {
	-webkit-transform: translateZ(0);
	transform: translateZ(0);
	-webkit-backface-visibility: hidden;
	background-color: #fff;
}

js

if (el == "#stickyNav") {
	el.find("h3").on('click', function(e) {
		e.preventDefault();
	});
}