Chrome 108でカップルが変更されます

Chrome 108の2つの重要な変更が来ています。CSSオーバーフロープロパティとAndroidビューポートの調整動作

css交換要素のオーバーフロー属性の変更：

Chrome 108から始めて、次の交換要素はoverflow属性：img、video、およびcanvasに従います。 Chromeの以前のバージョンでは、このプロパティは無視されました。

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

したがって、

以前にデフォルトのオーバーフローされた画像、ビデオ、およびキャンバス要素は、Chrome 108リリース後にトリミングされる場合があります。次の状況に注意する必要があります。

属性を使用してズームインしてボックスに入力します。アスペクト比がボックスと一致しない場合、画像は境界の外側に描画されます。
• object-fit
プロパティは、正方形の画像を円のように見せますが、
• が表示されるため、トリミングは発生しなくなります。 border-radius overflowset
を設定し、
• を含むすべての属性の継承をもたらします。 inherit: all overflow
コードの例については記事全体を読むことをお勧めしますが、不要な作物の場合、解決策は

：

でUAのデフォルトをオーバーライドすることです。 overflow: visible overflow: clip

Androidのビューポート調整動作の変化を確認：

img {
  overflow: visible;
}

11月、Chrome 108のリリースにより、Chromeは、画面上のキーボード（OSK）が表示されると、レイアウトビューポートの動作にいくつかの変更を加えます。この変更により、Chrome for Androidはレイアウトビューポートのサイズを変更しなくなりますが、Visual Viewportのみを変更します。これにより、ChromeのAndroidの動作は、iOSのChromeとiOSのSafariと一致します。 これは、ビューポートユニットを使用し、モバイルタッチデバイスでの固定位置決めの一般的なパズルに関連する変更です。私たちは長年にわたってこの問題について議論しました（そして解決しようとしました）

「ビューポートユニットを使用するときに注意すべきこと」（Chris Coyier）

"Louis Hoebregts"（Louis hoebregts）

「大きくて小さくてダイナミックなビューポート」（Chris Coyier）
"Chris Coyier"（Chris Coyier）
• この変更は、画面上のキーボードが表示されると、Android用のChromeがレイアウトビューポートのサイズを変更しなくなることを意味します。したがって、デバイスのキーボードが表示されると、ViewPortユニットの計算値は削減されなくなります。同様に、ビューポート全体を占有するように設計された要素は、キーボードに合うように削減されなくなります。固定位置の要素は、キーボードがポップアップするため、不明な場所に表示されなくなります。
これにより、iOSおよびiPadosのChrome、Safari、およびEdgeと一致する、より一貫したクロスブラウザー動作がもたらされます。キーボードUIがパスの要素を上書きして妨害できるため、更新された動作が理想的ではない場合でも、これは良いことです。

• これが起こったときに要素を見えるようにしたい場合は、プレフィックスwebkit-fill-available属性を使用して、Chrisが共有するソリューションを検討する価値があります。

  これは、UIでカバーされている部品ではなく、ビューポートで利用可能なスペースを使用します...しかし、Chromeは現在このプロパティを無視しています。バージョン108でサポートを開始する可能性は低いと確信しています。ただし、Chrome 108はSafariとFirefoxで既にサポートされている小規模でダイナミックなビューポートユニットのサポートも導入しているため、これは無関係な問題かもしれません。

  img {
    overflow: visible;
  }

  このブラウザは、Caniuseのデータをサポートしています。これには詳細が含まれています。番号は、ブラウザがこのバージョン以降でこの機能をサポートしていることを示しています。

  デスクトップバージョン

  モバイル/タブレットPC

以上がChrome 108でカップルが変更されますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。