Chrome 108的幾個更改

Chrome 108即將推出的兩項重要更改：CSS溢出屬性和Android視口調整行為

CSS替換元素的溢出屬性更改：

從Chrome 108開始，以下替換元素將遵循overflow屬性：img、video和canvas。在早期版本的Chrome中，此屬性會被忽略。

這意味著以前被裁剪到內容框的圖像，現在如果在樣式表中指定，可以繪製到邊界之外。

因此，任何以前默認溢出的圖像、視頻和畫布元素在Chrome 108發布後可能會被裁剪。需要注意以下幾種情況：

• 使用object-fit屬性縮放圖像並填充框。如果縱橫比與框不匹配，圖像將繪製在邊界之外。
• border-radius屬性使方形圖像看起來像圓形，但由於overflow可見，裁剪不再發生。
• 設置inherit: all，導致所有屬性繼承，包括overflow。

建議閱讀完整文章以了解代碼示例，但對於不需要的裁剪，解決方法是使用overflow: visible覆蓋UA的默認overflow: clip：

img {
  overflow: visible;
}

Android版Chrome視口調整行為更改：

11月份，隨著Chrome 108的發布，Chrome將對屏幕鍵盤（OSK）顯示時佈局視口（Layout Viewport）的行為進行一些更改。通過此更改，Android版Chrome將不再調整佈局視口大小，而只調整視覺視口（Visual Viewport）大小。這將使Android版Chrome的行為與iOS版Chrome和iOS版Safari保持一致。

這是一個與在移動觸摸設備上使用視口單位和固定定位的常見難題相關的更改。多年來，我們已經討論過（並嘗試解決）這個問題：

• “使用視口單位時需要注意的一些事項”（Chris Coyier）
• “移動端視口單位的技巧”（Louis Hoebregts）
• “大型、小型和動態視口”（Chris Coyier）
• “移動端WebKit中100vh的CSS修復”（Chris Coyier）

此更改意味著，當顯示屏幕鍵盤時，Android版Chrome將不再調整佈局視口的大小。因此，當設備的鍵盤顯示時，視口單位的計算值將不再縮小。同樣，設計為佔據整個視口的元素也不會再縮小以適應鍵盤。固定位置的元素也不會再因為鍵盤彈出而出現在未知位置。

這帶來了更一致的跨瀏覽器行為，與iOS和iPadOS上的Chrome、Safari和Edge保持一致。這很好，即使更新後的行為並不理想，因為鍵盤UI仍然可以覆蓋和遮擋擋路的元素。

如果您希望在發生這種情況時元素保持可見，那麼值得考慮一下Chris很久以前分享的一個解決方案，該方案使用前綴webkit-fill-available屬性：

img {
  overflow: visible;
}

這使用了視口中可用的空間，而不是UI覆蓋的部分……但是Chrome目前忽略了此屬性，我敢肯定它不太可能在108版本中開始支持它。不過，這可能是一個無關緊要的問題，因為Chrome 108還引入了對小型、大型和動態視口單位的支持，這些單位已經在Safari和Firefox中得到支持。

此瀏覽器支持數據來自Caniuse，其中包含更多詳細信息。數字表示瀏覽器在該版本及更高版本中支持該功能。

桌面版

移動/平板電腦

以上是Chrome 108的幾個更改的詳細內容。更多資訊請關注PHP中文網其他相關文章！