CSS의 대체된 요소에서 오버플로 변경

원치 않는 오버플로를 일으킬 수 있는 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">