Chrome 108 で予定されているいくつかの変更点

「CSS の置換要素のオーバーフローへの変更」:

Chrome 108 以降、次の置き換えられた要素はオーバーフロー プロパティを尊重します。 img, video & canvas. Chrome の以前のバージョンでは、このプロパティはこれらの要素で無視されていました。

これは、以前はコンテンツ ボックスにクリップされていた画像が、スタイル シートで指定されている場合、これらの境界の外側に描画できるようになったことを意味します。

そのため、Chrome 108 の出荷時に、一度クリップされた画像、動画、およびキャンバス要素がオーバーフローを表示する可能性があります。 これが既存の作業に影響を与える可能性がある注意された状況:

• 　 object-fit プロパティは、画像をスケーリングしてボックスを埋めるために使用されます。 縦横比がボックスと一致しない場合、画像は境界の外に描画されます。
• 　 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 は邪魔になる要素を覆い隠して隠すことができるため、更新された動作が理想的とは言えませんが、これは素晴らしいことです。

それが発生したときに要素を表示したままにしたい場合は、 解決策 クリスがずっと前に共有した 接頭辞を使用する webkit-fill-available プロパティ：

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

これは、UI でカバーされているものではなく、ビューポート内の利用可能なスペースを使用しています…しかし、Chrome は現在、このプロパティを無視しており、108 リリースでそれを尊重し始める可能性は低いと思います. ただし、それは論点かもしれませんが、 Chrome 108 も導入 Safari と Firefox で既にサポートされている、小さい、大きい、動的なビューポート ユニットのサポート。