오류 분석
안드로이드 일부 기기에서 스크롤을 빠르게했을시 브라우저의 렌더링 오류인지 레이아웃이 깨지는 현상이 발생되었다..
Before에 컨텐츠 내용이 잘 나왔다면, 사용자가 스크롤을 아주 빠르게 이동했을시 After 화면 처럼 컨텐츠의 일부 텍스트, 이미지 등이 렌더링 되지 않았다.
원인 파악
해당 페이지는 컨텐츠 클릭시 해당 컨텐츠의 scrollTop으로 이동하는 스크롤 이벤트가 걸려있었고, 또한 이동시 jquery animate를 사용중이다.
우선은 가장 의심되는 원인으로는 "브라우저 렌더링(?), 페인팅(?)이 느리다" 였다.
스크롤시에 브라우저가 화면을 다시그리는데 스크롤 속도에 대비해 브라우저 페인팅이 느려서 해당 현상이 나타난 것으로 보였다.
해결 방법
transform:translate3d(0, 0, 0)
결론적으로 css의 핵(hack)이라고 불려지는
transform:translate3d(0,0,0)을 사용하여 해결할 수 있었다. 0,0,0값을 준것은 변형이 필요없기 때문이다.
조금 더 자세히 구글링 해보니 translate3d는 GPU 가속을 사용하는 요소로서 기본적으로 브라우저 렌더링시에는 CPU를 사용하는데 GPU가 이에 개입하여 렌더링을 빠르게 할수있게 돕는다고 한다. 그래서 해당영역의 가장 부모인 overflow가 적용되어있는 컨텐츠에 적용하였다.
will-change: transform;
추가적으로 stack overflow를 헤매다가 발견한 will-change속성인데 예상되는 변화의 종류에 관한 힌트를 브라우저에 제공하여 브라우저 렌더링에 대비할수 있게 해주는 속성이다. 미리 대비할수 잇기에 기존에 핵으로 사용했던 translate3d보다 최적화면에서는 더 나을수 있다고 한다.
하지만 일부 Safari, IE등 지원이 되지않아, 이번엔 사용할 수 없었다.
마치며
이전부터 핵으로 들어봤었던 transform: translate3d(0,0,0)과 같은 코드는 "이렇게 하니까 잘되네" 라며 쉽게 넘어가곤 했던 코드중 하나였던 것 같다.
이번에 수정을하며 오류원인, 해결된이유 등에 대해 조금더 디테일하게 찾아봐야 더 발전할 수 있을거 같다고 느꼈다.
