원치 않는 오버플로를 일으킬 수 있는 CSS 동작 변경에 대한 고급 경고입니다.
Chrome 108부터 대체된 요소 img
, video
, canvas
가 오버플로 속성을 따릅니다. 이전 버전의 Chrome에서는 이러한 요소에서 이 속성이 무시되었습니다.
즉, 이전에 콘텐츠 상자에 잘렸던 이미지를 스타일 시트에서 지정했다면 이제 경계 외부에 그릴 수 있습니다. 기본 브라우저 스타일 시트는 다음 규칙에 따라 콘텐츠 상자에 오버플로를 잘라냅니다.
img {
overflow: clip;
overflow-clip-margin: content-box;
}
하지만 overflow: visible
를 설정하여 스타일시트에서 이 동작을 재정의할 수 있습니다. 다음 예는 이제 원치 않는 오버플로가 표시될 수 있는 몇 가지 사례를 보여줍니다.
object-fit
속성은 이미지 크기를 조정하고 상자를 채우는 데 사용됩니다. 가로세로 비율이 상자와 일치하지 않으면 이미지가 경계 밖에 그려집니다.
img {
object-fit: cover;
overflow: visible;
}
border-radius
속성은 정사각형 이미지를 원처럼 보이게 하지만, overflow
가 표시되므로 더 이상 클리핑이 발생하지 않습니다.
img {
border-radius: 50% 50%;
overflow: visible;
}
inherit: all
설정 및 overflow
을 포함한 모든 속성 상속
img {
all: inherit;
}
해결 방법
이렇게 변경하면 원치 않는 오버플로가 표시되고 오버플로 속성을 visible로 재정의하는 것이 의도되지 않은 경우에는 DevTools를 통해 요소에 적용된 CSS를 검사하세요. 이렇게 하면 오버플로 속성을 visible
로 재정의하는 CSS 선언을 식별하여 삭제하거나 clip
로 업데이트할 수 있습니다.
img {
overflow: clip;
}
CSS 업데이트가 간단하지 않은 경우 또 다른 해결 방법은 요소에 다음 인라인 스타일을 추가하는 것입니다.
<img style="overflow:clip !important">