CSS屬性會變化不確定的行爲

Question

我使用語義的用戶界面，並已成功地縮小了一些不確定的行爲在CSS屬性will-change（我發現它在自己的模態的）：

.outer{ 
 
    background-color: black; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
} 
 
.inner{ 
 
    position:absolute; 
 
    background-color: white; 
 
    left: 50%; 
 
    top: 100px; 
 
    width: 400px; 
 
    margin-left: -200px; 
 
    height: 100px; 
 
    padding: 5px; 
 
    /** 
 
    * comment out the line below 
 
    * to see the desired/different result 
 
    **/ 
 
    will-change: transform; 
 
} 
 
.baby{ 
 
    color: yellow; 
 
    position: fixed; 
 
    left: 20px; 
 
    top: 20px; 
 
    right: 0; 
 
    border: 1px solid red; 
 
}

<div class="outer"> 
 
    <div class="inner"> 
 
    <div class="baby">here</div> 
 
    <div class="content">some content</div> 
 
    </div> 
 
</div>

我只在鉻中測試過。有沒有人有關於這裏發生了什麼的更多信息？爲什麼will-change對實際佈局做任何事情？

Answer 1

will-change會影響佈局，因爲它經常與其值可以在不影響佈局的值和不會影響佈局的值之間更改的屬性一起使用。設置will-change告訴瀏覽器準備進行這種潛在的更改，這會導致瀏覽器提前應用佈局更改。

這isn't undefined behavior：

如果一個屬性的任何非初始值將創建元件上的堆疊環境，指定在將變該屬性必須創建元件上的堆疊環境。

如果屬性的任何非初始值都會導致元素爲絕對定位的元素生成包含塊，那麼在will-change中指定該屬性必須導致該元素爲絕對定位的元素生成包含塊。

如果屬性的任何非初始值都會導致元素爲固定定位元素生成包含塊，那麼在will-change中指定該屬性必須使該元素爲固定定位元素生成包含塊。

如果屬性的任何非初始值都會導致元素的渲染差異（例如對文本使用不同的消除鋸齒策略），則用戶代理應該在will中指定屬性時使用該替代渲染 - 改變，以避免財產最終改變時的突然渲染差異。

例如，將不透明度設置爲除1之外的任何值都會在元素上創建堆疊上下文。因此，設置將改變：不透明度還創建了一個堆疊內容，即使不透明度目前依然等於1

在你的情況下，由於轉換導致the creation of both a stacking context and a containing block，設置will-change: transform因此也將導致創建堆棧上下文和包含塊，因爲您向瀏覽器建議該元素現在或者以後可能會進行轉換，並且在這種情況下，佈局將會受到影響。