transform變換z-index層級渲染異常實例分析

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

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務，包含不限于成都網(wǎng)站建設、網(wǎng)站制作、綠春網(wǎng)絡推廣、微信小程序、綠春網(wǎng)絡營銷、綠春企業(yè)策劃、綠春品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯(lián)為所有大學生創(chuàng)業(yè)者提供綠春建站搭建服務，24小時服務熱線：13518219792，官方網(wǎng)址：muchs.cn

一、Safari是新時代的IE6

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

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

二、Safari 3D變換會忽略z-index的層級

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

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

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

不出意外，滾動頁面，會看到類似下面這樣的渲染效果：

會看到，紅色的塊狀條子，從圖片中心穿過去了。實際上，這個紅色條子是層級99的position:fixed定位的元素：

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

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

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

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

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

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

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

算了，別繼續(xù)開腦洞了，來看看這個問題該如何解決吧~~

三、Safari 3D變換會忽略z-index問題解決

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

方法2：
以毒攻毒。有時候，頁面復雜，我們不能給父級設置overflow:hidden，怎么辦呢？

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

那具體該如何做呢？

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

我們仔細觀察下面這張效果截圖：

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

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

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

結(jié)果：

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

趕快用120px試試：

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

結(jié)果：

關(guān)于“transform變換z-index層級渲染異常實例分析”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對“transform變換z-index層級渲染異常實例分析”知識都有一定的了解，大家如果還想學習更多知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

網(wǎng)頁標題：transform變換z-index層級渲染異常實例分析
當前鏈接：http://muchs.cn/article16/jcjjgg.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設、網(wǎng)站內(nèi)鏈、用戶體驗、企業(yè)建站、小程序開發(fā)、品牌網(wǎng)站建設

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)