[CSS3] iOS object 떨림 현상 + 스크롤 바운드 해결

반응형 작업 후에 실제 기기로 테스트 했을 경우 부분적으로 달라보이는 현상이 있다.

iOS로 테스트 중이였는데 스크롤시, 다음 이미지와 설명이 올라오는 모션을 코딩해둔 부분에서 미세하게 이미지 떨림현상이 발견되었다. 

AOS로 테스트할때에는 별다른 이상이 없었는데 역시... 더 꼼꼼히 봐야하는 환경..

 

오른쪽에 미세한 버벅임 ㄷㄷㄷ

구글링을 하다 Chapt GPT에게 물어봤는데 역시나 명쾌하게 해답을 해줬다.

해당 버벅이는 대상인 img 태그에 아래와 같은 스타일을 먹여준다.

/* ? TODO IOS 이미지 떨림 현상 */
.value .screen.m .imgs>li .imgs__bg { display: block; width: 100%; will-change: transform; backface-visibility: hidden; transform: translate3d(0, 0, 0); -webkit-transform-style: preserve-3d; }

 

핵심 CSS 스타일 소스는 아래와 같다.

img {
    will-change: transform;
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-transform-style: preserve-3d;
}

 

will-change: transform;

➡ 브라우저가 해당 요소를 GPU에서 미리 랜더링 함.

transform: translate3d(0, 0, 0);

➡ GPU 가속을 유도하여 렌더링 성능 개선

backface-visibility: hidden;

➡ 요소가 뒤집힐 떄 불필요한 렌더링 방지

-webkit-transform-style: preserve-3d;

➡ 3D 공간에서의 이미지 부드럽게 렌더링 됨

 

그리고 추가적으로 html과 body부분에도 아래와 같은 스타일을 추가해줬다.

iOS 스크롤 바운스 해결 소스

/* ? TODO iOS scroll bounce debuging */
html,body { overscroll-behavior: none; touch-action: pan-y; overscroll-behavior: none;}

 

overscroll-behavior: none;

➡ iOS에서 스크롤이 끝까지 갔을 때 튕기는 효과를 방지

touch-action: pan-y;

➡ 가로 스크롤을 막고 세로 스크롤만 허용

overscroll-behavior: none;

➡ 스크롤 바운스 방지