Overflow : scroll; 적용 시 폰트 및 이미지 흐릿해지는 현상

뮻

선결론!

결론
- 가장 쉬운 해결책: will-change: transform; 추가
- 추가 해결책: backface-visibility: hidden; 또는 transform: translateZ(0); 적용
- 완벽한 해결책이 없을 경우: overflow-x: auto;로 변경해서 브라우저가 자동으로 최적화하도록 유도

 

https://pngtree.com/so/horizontal-scroll

 

오늘 갑자기 작업중에 overflow-x :scroll; 할일이 있어서 적용했는데
흐릿해지더군요..!

 

좌. overflow 적용 전, 우: overflow 적용 후

 

overflow-x: scroll;을 적용했더니 폰트와 이미지가 흐릿해지는 현상은 

브라우저의 서브픽셀 렌더링 문제 때문입니다.

원인

서브픽셀 위치 문제
overflow-x: scroll;을 사용하면 브라우저가 정확한 정수 단위의 픽셀 위치가 아닌 "서브픽셀" 단위로 요소를 배치할 수 있음.
이 과정에서 글자와 이미지가 정확한 픽셀 경계에 맞춰지지 않으면서 흐려지는 현상이 발생함.

GPU 가속과 관련된 문제
overflow-x: scroll;을 적용하면 GPU 가속이 활성화되면서, 일부 브라우저(특히 크롬)에서 글자가 부드럽게 렌더링되지만 동시에 약간 흐려질 수 있음.

CSS 속성으로 인한 영향 transform: translate3d(0, 0, 0); 같은 GPU 가속을 유발하는 속성이 적용되면 브라우저가 안티앨리어싱을 다르게 적용해서 폰트가 흐려지는 경우가 있음.

 

 

 

 해결 방법
1️⃣ will-change: transform; 적용하기

.your-div {
    will-change: transform;
}

브라우저에게 이 요소가 변할 가능성이 있다는 걸 미리 알려주어 더 나은 렌더링을 유도함.

 

2️⃣ backface-visibility: hidden; 추가

.your-div {
    backface-visibility: hidden;
    perspective: 1000px;
}

일부 브라우저에서 텍스트와 이미지의 안티앨리어싱 문제를 줄여줌.

 

3️⃣ translateZ(0); 적용하기 (GPU 가속 최적화)

.your-div {
    transform: translateZ(0);
}
크롬에서 폰트가 흐려지는 문제를 완화할 수 있음.

 

4️⃣ overflow-x: auto;로 변경

.your-div {
    overflow-x: auto;
}

scroll 대신 auto를 사용하면 불필요한 스크롤바 렌더링을 방지하여 흐려짐을 줄일 수 있음.

 

 

하지만 전부다 안됐고 알고보니 영역을 다른곳으로 잡고 했다

그러니 잘 되었음