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

lei___ 發(fā)布于2019-08-29 13:05 / 3065人閱讀

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

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

層疊關(guān)系及參考視圖

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

根元素 (HTML),

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

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

opacity 屬性值小于 1 的元素，

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

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

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設(shè)置為 "isolate"的元素，

position: fixed

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

-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素

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

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

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

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

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

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

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

祖先元素的子元素的子元素的子元素：以父級元素的左上角坐標(biāo)為起點(diǎn)，祖先元素的長寬為長寬，畫一個(gè)虛擬的視圖，定位視圖就是這個(gè)虛擬的視圖；異常

祖先元素的子元素的子元素的子元素的往后每一代，都沿襲第三代開始的表現(xiàn)，依當(dāng)前元素的父元素左上角坐標(biāo)為起點(diǎ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)，從第三代開始，參考視圖變更為以父級元素左上角位置為起點(diǎn)，祖先元素長寬為長寬的虛擬視圖為參考視圖。因此情況變得不可控。

解決方案

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

好吧，我沒找到其他辦法

云服務(wù)器 GPU云服務(wù)器共有祖先元素 html后代元素 js獲取上一個(gè)元素上引起

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/112354.html

發(fā)表評論

登陸后可評論

0條評論

lei___

男|高級講師

我要關(guān)注我要私信

TA的文章

史上最強(qiáng)C語言教程----分支和循環(huán)（4）

閱讀 3771·2021-11-11 16:55
Windows平臺常用分析工具的使用總結(jié)

閱讀 1696·2021-10-08 10:04
今天收到《新程序員》雜志，忽然發(fā)現(xiàn)在CSDN賬號注冊已經(jīng)21年了！

閱讀 3651·2021-09-27 13:36
Element UI table參數(shù)中的selectable的使用

閱讀 2869·2019-08-30 15:53
90%的項(xiàng)目經(jīng)理都想不到，溝通成本原來可以這么小

閱讀 1925·2019-08-30 11:17
vue中render函數(shù)的使用

閱讀 1322·2019-08-29 16:55
vuejs實(shí)現(xiàn)圖片放大鏡效果

閱讀 2160·2019-08-29 13:57
css布局，左右固定中間自適應(yīng)實(shí)現(xiàn)

閱讀 2580·2019-08-29 13:13

成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲中文字幕日韩无码

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

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

相關(guān)文章