解決 Chrome 中「container-type: inline-size」意外變更所帶來的問題
- Patricia Arquette原創
- 2024-10-03 16:09:02607瀏覽
Chrome 129 引入了容器查詢行為的變化，影響具有容器類型：內聯大小的元素。此更改雖然很小，但有可能破壞您的網頁應用程式的佈局。我將回顧一下更改的內容、之前的行為方式以及從 Chrome 129 開始的行為。
發生了什麼變化？
在 Chrome 129 之前，容器類型：隱式內嵌大小：
- 為絕對定位的元素建立了一個包含區塊
- 建立了新的堆疊上下文
為了說明這一點，請考慮以下內容：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.container {
container-type: inline-size;
width: 300px;
height: 300px;
border: 2px solid black;
padding: 1rem;
margin: 2rem;
contain: layout;
}
.child,
.sibling {
position: absolute;
display: flex;
justify-content: center;
align-items: center;
color: white;
}
.child {
width: 200px;
height: 200px;
}
.child-1 {
background-color: rgba(255, 0, 0, 0.7);
top: 100px;
left: 100px;
z-index: 2;
}
.child-2 {
background-color: rgba(0, 255, 0, 0.7);
top: 30px;
left: 0;
z-index: 1;
}
.sibling {
width: 150px;
height: 150px;
background-color: rgba(0, 0, 255, 0.7);
top: 165px;
left: 50px;
z-index: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="child child-1">Child 1 (z-index: 2)</div>
<div class="child child-2">Child 2 (z-index: 1)</div>
</div>
<div class="sibling">Sibling (z-index: 1)</div>
</body>
</html>
Chrome 129之前，上述程式碼渲染如下：
黑色輪廓的 .container div 的子級是絕對定位的。 child-2（綠色 div）位於 left: 0，但它與父親 .container div 的左側邊界對齊。這是因為在 Chrome 128 及更早版本中，container-type: inline-size 隱式為絕對定位的子元素建立了一個包含區塊。
此外，container-type: inline-size 元素隱式建立一個新的堆疊上下文，導致綠色位於底部，紅色位於中間，藍色位於頂部。
但是，從 Chrome 129 開始，相同的 HTML 和 CSS 呈現方式如下，
不會為 .container 元素的子元素建立包含區塊，因此絕對定位的元素是相對於網頁而不是相對於其容器定位的。這會導致綠色方塊完全脫離容器並接觸網頁的左側。
此外，由於沒有建立新的堆疊上下文，因此子級和兄弟級堆疊的順序已更改。綠色方塊仍然位於底部，但現在藍色方塊位於中間，紅色方塊位於頂部。
為什麼要改變？
根據 Chromium 團隊在官方 Chromium 錯誤追蹤器上的說法，這是一項有意的更改，旨在修復團隊認為原始規範中的設計錯誤。
規範本身尚未更新，但由於工作組內達成一致，團隊在對規範進行任何更改之前對瀏覽器行為進行了更改。
截至撰寫本文時（2024 年 10 月 3 日），所有其他主要瀏覽器（Firefox、Safari）仍然遵循 Chrome 129 之前的行為。
緩解變化
如果您只是想將內容恢復到Chrome 129 之前的狀態（同時保持瀏覽器之間的一致性，直到Firefox 和Safari 更新以遵循Chrome 的實現），您只需添加contains:layout;到具有container -type: inline-size; 的元素。
如果你想要新增包含區塊行為但不建立新的堆疊上下文，你也可以加入position:relative to the container-type: inline-size;元素，它將為子元素建立一個包含區塊，但不會建立新的堆疊上下文。然而，這將導致不同瀏覽器中的行為不同，直到其他瀏覽器更新以追隨 Chrome 的領先地位。
自己嘗試一下
下面是一個您可以使用的 CodePen，它演示了我上面所說的內容。如果您從 .container 樣式中刪除 contains: 佈局，並且您使用的是 Chrome 129 或更高版本，則佈局將像我上面提供的第二張圖片中一樣顯示。但是，如果您在 Firefox 131（截至撰寫時最新）中查看 CodePen，無論是否設定 contains: 佈局，它都應該顯示相同的內容。
我在Chrome 129 的發行說明中找不到提及此更改的內容，並且正如已經提到的，此更改是在任何規範更改之前進行的，因此它確實讓我們措手不及，並顯著破壞了佈局我們的網頁應用程式之一。我希望這些資訊可以幫助其他遇到相同問題的人。
以上是解決 Chrome 中「container-type: inline-size」意外變更所帶來的問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！