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">