transform變換z-index層級(jí)渲染異常實(shí)例分析

這篇文章主要介紹了transform變換z-index層級(jí)渲染異常實(shí)例分析的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇transform變換z-index層級(jí)渲染異常實(shí)例分析文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。

一、Safari是新時(shí)代的IE6

Safari font-size的px單位和vm單位計(jì)算不支持，需要是百分比單位。
Safari 漸變，從#fff到transparent會(huì)有灰色帶，其他瀏覽器都是白色到透明。

或許，很早的時(shí)候，Safari和IE有段曖昧不清的過(guò)往（看下圖的攻受表情）：

二、Safari 3D變換會(huì)忽略z-index的層級(jí)

在Safari瀏覽器下，此Safari瀏覽器包括iOS的Safari，iPhone上的微信瀏覽器，以及Mac OS X系統(tǒng)的Safari瀏覽器，當(dāng)我們使用3D transform變換的時(shí)候，如果祖先元素沒(méi)有overflow:hidden/scroll/auto等限制，則會(huì)直接忽略自身和其他元素的z-index層疊順序設(shè)置，而直接使用真實(shí)世界的3D視角進(jìn)行渲染。

我們直接看例子，如果您現(xiàn)在用的是iMac或air或iPad或iPhone之類的蘋果設(shè)備瀏覽本文，您可以狠狠地點(diǎn)擊這里：Safari瀏覽器下3D transform和z-index層級(jí)渲染demo

如果高度不夠頁(yè)面滾動(dòng)，請(qǐng)雙指放大頁(yè)面比例，讓圖片和紅色條子(fixed定位)發(fā)生重疊，就會(huì)看到很有趣的渲染效果。

不出意外，滾動(dòng)頁(yè)面，會(huì)看到類似下面這樣的渲染效果：

會(huì)看到，紅色的塊狀條子，從圖片中心穿過(guò)去了。實(shí)際上，這個(gè)紅色條子是層級(jí)99的position:fixed定位的元素：

.bar {
    position: fixed; /* Safari下z-index無(wú)效 */z-index: 99;
}

而圖片就是一個(gè)小白圖片，沒(méi)有定位屬性的設(shè)置，就一個(gè)簡(jiǎn)單的帶有視角的3D旋轉(zhuǎn)變換：

img {
    transform: perspective(300px) rotateY(40deg);
}

按照CSS規(guī)范上的說(shuō)明，紅色條子應(yīng)該在圖片上面，類似下面這樣：

IE, Chrome, FireFox都是遵循這種渲染的，但是，Safari瀏覽器卻自己任性了一把。直接把z-index:99給無(wú)視了，對(duì)無(wú)視了，在座的諸位也不要懷疑是不是99還不夠大，就算是9999999這是這般渲染，因?yàn)镾afari是忽略z-index，而不是IE6,IE7那種z-index計(jì)算bug.

根據(jù)我自己的理解，Safari的這種渲染或許并不能直接稱之為bug, 因?yàn)?，從某些角度講，Safari的這種渲染挺符合符合現(xiàn)實(shí)3D世界。

我自己YY了一下，Safari如果沒(méi)有overflow的限制，就會(huì)把2次元頁(yè)面變成真實(shí)的3次元，原本圖片和紅色條子在一個(gè)面上，當(dāng)圖片進(jìn)行了3D旋轉(zhuǎn)，那自然紅色條子就從中心穿過(guò)，而且視角背后的內(nèi)容是看不見的。

算了，別繼續(xù)開腦洞了，來(lái)看看這個(gè)問(wèn)題該如何解決吧~~

三、Safari 3D變換會(huì)忽略z-index問(wèn)題解決

方法1：
父級(jí)，任意父級(jí)，非body級(jí)別，設(shè)置overflow:hidden可恢復(fù)和其他瀏覽器一樣的渲染。

方法2：
以毒攻毒。有時(shí)候，頁(yè)面復(fù)雜，我們不能給父級(jí)設(shè)置overflow:hidden，怎么辦呢？

楊過(guò)的情花劇毒怎么解的？斷腸草啊，另一種劇毒。這里也是類似。既然“穿越”的渲染問(wèn)題是由3D transform變換產(chǎn)生的，那么，要解決此問(wèn)題，我們也可以使用3D transform變換。

那具體該如何做呢？

我在“好吧，CSS3 3D transform變換，不過(guò)如此！”一文中就科普過(guò)z軸的概念。

我們仔細(xì)觀察下面這張效果截圖：

我們的紅色條子在z軸位置0處，對(duì)不對(duì)，所以才從圖片的中心穿過(guò)。而z軸是我們眼睛看屏幕這條軸，在z軸的值越大，就離用戶的眼睛越近；值越小，里用戶眼睛越小。所謂近大遠(yuǎn)?。ㄈ绻付艘暯莗erspective），就是這么回事。

所以，我們要想讓紅色條子覆蓋在圖片上，只要設(shè)置一個(gè)足夠大的translateZ值就可以，如100px：

.bar {
    position: fixed;
    z-index: 99;/* 以毒攻毒 */transform: translateZ(100px);}

結(jié)果：

咦，尷尬，好像還是不夠大，圖片還有一點(diǎn)點(diǎn)位置在紅色條的上面~~ 

趕快用120px試試：

.bar {
    position: fixed;
    z-index: 99;/* 以毒攻毒 */transform: translateZ(120px);}

結(jié)果：

關(guān)于“transform變換z-index層級(jí)渲染異常實(shí)例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“transform變換z-index層級(jí)渲染異常實(shí)例分析”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道。