Chrome 108의 몇 가지 변경 사항

"CSS에서 교체된 요소에 대한 오버플로 변경":

Chrome 108에서 다음 대체 요소는 overflow 속성을 존중합니다. img, video 와 canvas. 이전 버전의 Chrome에서는 이러한 요소에서 이 속성이 무시되었습니다.

이는 이전에 컨텐츠 상자에 잘린 이미지가 스타일 시트에서 그렇게 하도록 지정된 경우 이제 해당 경계 외부로 그릴 수 있음을 의미합니다.

따라서 한 번 잘린 이미지, 비디오 및 캔버스 요소는 Chrome 108이 출시될 때 오버플로를 표시할 수 있습니다. 이것이 기존 작업에 영향을 미칠 수 있는 언급된 상황:

• XNUMXD덴탈의 object-fit 속성은 이미지의 크기를 조정하고 상자를 채우는 데 사용됩니다. 종횡비가 상자와 일치하지 않으면 이미지가 경계 외부로 그려집니다.
• XNUMXD덴탈의 border-radius 속성은 정사각형 이미지를 원처럼 보이게 하지만 overflow 클리핑이 더 이상 발생하지 않습니다.
• 환경 inherit: all 다음을 포함하여 모든 속성이 상속되도록 합니다. overflow.

코드 예제에 대한 전체 기사를 읽을 가치가 있지만 원치 않는 보이는 오버플로에 대한 솔루션은 UA의 기본값을 재정의하는 것입니다. overflow: visible 과 overflow: clip:

img {
  overflow: clip;
}

"Android의 Chrome에 적용되는 표시 영역 크기 조정 동작 변경에 대비하세요.":

108월에 Chrome XNUMX이 출시되면서 Chrome은 OSK(화면 키보드)가 표시될 때 레이아웃 뷰포트가 작동하는 방식을 일부 변경할 예정입니다. 이 변경으로 Android의 Chrome은 더 이상 레이아웃 표시 영역의 크기를 조정하지 않고 대신 시각적 표시 영역만 크기를 조정합니다. 이렇게 하면 Android의 Chrome 동작이 iOS의 Chrome 및 iOS의 Safari 동작과 동일하게 됩니다.

이것은 뷰포트 단위 작업의 일반적인 골칫거리와 모바일 터치 장치의 고정 위치와 관련된 변경 사항입니다. 우리는 수년 동안 그것을 다루었고 (해결을 시도했습니다):

변경 사항은 Android의 Chrome이 온스크린 키보드가 표시될 때 더 이상 레이아웃 뷰포트의 크기를 조정하지 않음을 의미합니다. 따라서 장치의 키보드가 표시될 때 뷰포트 단위의 계산된 값이 더 이상 축소되지 않습니다. 더 이상 키보드를 수용하기 위해 축소되지 않는 전체 뷰포트를 차지하도록 설계된 요소도 마찬가지입니다. 그리고 더 이상 키보드가 표시되는 위치를 아는 고정 위치 요소가 종료되지 않습니다.

이는 iOS 및 iPadOS의 Chrome, Safari 및 Edge와 일치하는 보다 일관된 브라우저 간 동작을 제공합니다. 업데이트된 동작이 이상적이지 않더라도 키보드 UI가 방해가 되는 요소를 여전히 덮고 가릴 수 있기 때문에 좋습니다.

그런 일이 발생했을 때 요소가 계속 표시되도록 하려면 다음을 살펴보는 것이 좋습니다. Chris가 오래전에 공유한 솔루션 접두사를 사용하는 webkit-fill-available 재산:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

이는 UI에서 다루는 공간이 아닌 뷰포트에서 사용 가능한 공간을 사용합니다. 그러나 Chrome은 현재 이 속성을 무시하고 있으며 108 릴리스에서 이를 존중하기 시작할 가능성이 거의 없다고 생각합니다. 그것은 논점일 수 있지만, Chrome 108도 소개합니다. Safari 및 Firefox에서 이미 지원되는 크고 작은 동적 뷰포트 단위를 지원합니다.