祖先元素transform非none時在Iphone6上引起后代fixed/absolute元素的怪

MarvinZhang 發(fā)布于2019-08-01 17:18 / 2956人閱讀

摘要：如題，祖先元素非時，記錄一下中引起后代元素參考視圖怪異表現(xiàn)和解決方案。不為元素預留空間，而是通過指定元素相對于屏幕視口的位置來指定元素位置。打印時，元素會出現(xiàn)在的每頁的固定位置。

如題，祖先元素transform非none時，記錄一下Iphone6中引起后代元素fixed參考視圖怪異表現(xiàn)和解決方案。

層疊關系及參考視圖

層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對于面向（電腦屏幕的）視窗或者網(wǎng)頁的用戶的z軸上延伸，HTML元素依據(jù)其自身屬性按照優(yōu)先級順序占用層疊上下文的空間。
文檔中的層疊上下文由滿足以下任意一個條件的元素形成：

根元素 (HTML),

z-index 值不為 "auto"的絕對/相對定位，

一個 z-index 值不為 "auto"的 flex 項目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小于 1 的元素，

transform 屬性值不為 "none"的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設置為 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 屬性，即便你沒有直接指定這些屬性的值（參考這篇文章）

-webkit-overflow-scrolling 屬性被設置 "touch"的元素

關于層疊上下文的層級及創(chuàng)建，可以參考下張鑫旭大神的深入理解CSS中的層疊上下文和層疊順序，相當詳細；在今天討論的問題中，知道position:fixed和transform非none都會創(chuàng)建新的層疊上下文，至于層級，在同一層疊上下文中，取決于后來居上及孰大孰上兩個規(guī)則。
至于參考視圖，兩句話

absolute：不為元素預留空間，通過指定元素相對于最近的非 static 定位祖先元素的偏移，來確定元素位置。
fixed： 不為元素預留空間，而是通過指定元素相對于屏幕視口（viewport）的位置來指定元素位置。元素的位置在屏幕滾動時不會改變。打印時，元素會出現(xiàn)在的每頁的固定位置。fixed 屬性會創(chuàng)建新的層疊上下文。當元素祖先的 transform  屬性非 none 時，容器由視口改為該祖先。

祖先元素transform屬性不為none對子元素fixed的影響
不考慮其他因素的前提下，祖先元素的transform屬性不為none時，按照規(guī)范，后代元素的表現(xiàn)應為：

absolute元素依然保持以最近的非position: static;的元素為參考,其中祖先元素也會被視為非position: static;

fixed元素默認的參考視圖是屏幕視口，在這里，祖先元素transform被設置為非none時，后代元素的參考視圖應該是祖先元素；
Iphone6（未排查IOS版本）當中，不管祖先元素定位屬性，子代元素定位屬性為absolute/fixed時，子代的子代及再往后的子代，定位屬性為fixed時，定位視圖并不是祖先元素

祖先元素的子元素：定位視圖是祖先元素；正常

祖先元素的子元素的子元素：定位視圖是祖先元素；正常

祖先元素的子元素的子元素的子元素：以父級元素的左上角坐標為起點，祖先元素的長寬為長寬，畫一個虛擬的視圖，定位視圖就是這個虛擬的視圖；異常

祖先元素的子元素的子元素的子元素的往后每一代，都沿襲第三代開始的表現(xiàn)，依當前元素的父元素左上角坐標為起點，祖先元素長寬為長寬的虛擬視圖為定位視圖；異常
看代碼及圖：

/* html */
1
    2
        3
            4
                5
                    6
                
            
        
    

/* css */
.red{
    width: 150px;
    height: 150px;
    background: red;
    text-align: center;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.green{
    position: absolute;
    width: 120px;
    height: 120px;
    left: 0px;
    top: 0px;
    background: green;
}
.yellow{
    position: fixed;
    width: 80px;
    height: 80px;
    left: 0px;
    bottom: 0px;
    background: yellow;
}
.black{
    position: fixed;
    width: 50px;
    height: 50px;
    right: 0px;
    top: 0px;
    background: black;
}
.aquamarine{
    position: fixed;
    width: 30px;
    height: 30px;
    right: 0px;
    bottom: 0px;
    background: aquamarine;
}
.blue{
    position: fixed;
    width: 10px;
    height: 10px;
    right: 0px;
    bottom: 0px;
    background: blue;
}

左邊圖為正常情況下的表現(xiàn)，transform所有后代元素的fixed參考視圖都是transform的祖先元素，而右邊的是iphone6上的表現(xiàn)，從第三代開始，參考視圖變更為以父級元素左上角位置為起點，祖先元素長寬為長寬的虛擬視圖為參考視圖。因此情況變得不可控。

解決方案

既然事情因transform引起，就在fixed定位嵌套三層以上時慎用transform，這個為最基本的解決方案。

好吧，我沒找到其他辦法

云服務器 GPU云服務器共有祖先元素 html后代元素 js獲取上一個元素上引起

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51087.html

祖先元素transform非none時在Iphone6上引起后代fixed/absolute元素的怪

摘要：如題，祖先元素非時，記錄一下中引起后代元素參考視圖怪異表現(xiàn)和解決方案。不為元素預留空間，而是通過指定元素相對于屏幕視口的位置來指定元素位置。打印時，元素會出現(xiàn)在的每頁的固定位置。如題，祖先元素transform非none時，記錄一下Iphone6中引起后代元素fixed參考視圖怪異表現(xiàn)和解決方案。層疊關系及參考視圖層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相...

lei___ 2019-08-29 13:05 評論0 收藏0
我所了解的CSS包含塊

摘要：根元素包含塊根元素的包含塊是一個矩形叫做初始化包含塊。如果屬性是的話，包含塊就是由組成的。示例二代碼在這里，這個標簽為默認的且它的父標簽的為，所以標簽的包含塊為標簽，通過我們的判斷規(guī)則一來確定。寫在前面，本文將同步發(fā)布于Blog、掘金、segmentfault、知乎等處，如果本文對你有幫助，記得為我得到我的個人技術博客項目給個star哦。指出錯誤觀念許多開發(fā)者認為一個元素的包含塊...

BenCHou 2019-08-30 15:54 評論0 收藏0
CSS 面試題總結

摘要：而名作為標簽的身份則是唯一的，在頁面中只能出現(xiàn)一次。會導致父容器高度塌陷。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會在上面。之后的內聯(lián)對象會被排列在同一行內。的作用是允許瀏覽器渲染它，但是不顯示出來，這樣才能實現(xiàn)清除浮動。 CSS 中類 (classes) 和 ID 的區(qū)別。書寫上的差別：class名用.號開頭來定義，id名用#號開頭來定義；優(yōu)先級不同（權重不同）調用上的...

tomato 2019-08-29 15:06 評論0 收藏0
前端面試筆記 - css

摘要：是頁面渲染的一部分。一個就是一個整體，所有子元素都會在里面渲染，而不會影響外面的元素。常見為，根元素，，元素，或者設置了的元素列舉不同的清除浮動的技巧，并指出它們各自適用的使用場景。是一個把眾多小圖片打包成一個大圖以減少請求。 CSS 中類 (classes) 和 ID 的區(qū)別。 id唯一，class可以多個請問 resetting 和 normalizing CSS 之間的區(qū)別？你...

loonggg 2019-08-23 14:50 評論0 收藏0
css基礎

摘要：在元素之后添加內容控制表單控件的禁用狀態(tài)。生成相對定位的元素，相對于其正常位置進行定位。由于浮動框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區(qū)別聯(lián)系：它們都能讓元素不可見區(qū)別： display:none;會讓元素完全從渲染樹中消失，渲染的時候不占據(jù)任何空間；vi...

JinB 2019-08-30 14:21 評論0 收藏0