最近做了一個關於凍結列的小項目,做到最后碰到了一個問題,就是我設置的z-index在ios頁面中不起效.
起先覺得是我css代碼中設置的樣式跟js追加的transform樣式可能哪邊有重合,查了一通才發現是safari瀏覽器根本不支持添加transform的z-index.
解決方案如下,
一:Safari 3D變換會忽略z-index的層級
在Safari瀏覽器下，此Safari瀏覽器包括iOS的Safari，iPhone上的微信瀏覽器，以及Mac OS X系統的Safari瀏覽器，當我們使用3D transform變換的時候，如果祖先元素沒有overflow:hidden/scroll/auto等限制，則會直接忽略自身和其他元素的z-index層疊順序設置，而直接使用真實世界的3D視角進行渲染。
代碼
CSS代碼：
.bar { height: 30px; background-color: #cd0000; position: fixed; left: 0; right: 0; top: 120px; /* Safari下z-index無效 */ z-index: 99; } .box { text-align: center; } .rotate { transform: perspective(300px) rotateY(40deg); }
HTML代碼：
<div class="bar"></div> <div class="box"> <img class="rotate" src="mm1.jpg"> </div>
在safari瀏覽器中不出意外，滾動頁面，會看到類似下面這樣的渲染效果：
當然, 其它的瀏覽器還是好的. 只有在safari瀏覽器上時特殊的.
會看到，紅色的塊狀條子，從圖片中心穿過去了。實際上，這個紅色條子是層級99的position:fixed定位的元素：
.bar {
position: fixed;
/* Safari下z-index無效 */
z-index: 99;
}
而圖片就是一個小白圖片，沒有定位屬性的設置，就一個簡單的帶有視角的3D旋轉變換：
img {
transform: perspective(300px) rotateY(40deg);
}
按照CSS規范上的說明，紅色條子應該在圖片上面，類似下面這樣：
IE, Chrome, FireFox都是遵循這種渲染的，但是，Safari瀏覽器卻自己任性了一把。直接把z-index:99給無視了，對無視了，在座的諸位也不要懷疑是不是99還不夠大，就算是9999999這是這般渲染，因為Safari是忽略z-index，而不是IE6,IE7那種z-index計算bug.
根據我自己的理解，Safari的這種渲染或許並不能直接稱之為bug, 因為，從某些角度講，Safari的這種渲染挺符合符合現實3D世界。
我自己YY了一下，Safari如果沒有overflow的限制，就會把2次元頁面變成真實的3次元，原本圖片和紅色條子在一個面上，當圖片進行了3D旋轉，那自然紅色條子就從中心穿過，而且視角背后的內容是看不見的。
算了，別繼續開腦洞了，來看看這個問題該如何解決吧~~
二、Safari 3D變換會忽略z-index問題解決
方法1：
父級，任意父級，非body級別，設置overflow:hidden可恢復和其他瀏覽器一樣的渲染。
方法2：
以毒攻毒。有時候，頁面復雜，我們不能給父級設置overflow:hidden，怎么辦呢？
楊過的情花劇毒怎么解的？斷腸草啊，另一種劇毒。這里也是類似。既然“穿越”的渲染問題是由3D transform變換產生的，那么，要解決此問題，我們也可以使用3D transform變換。
所以，我們要想讓紅色條子覆蓋在圖片上，只要設置一個足夠大的translateZ值就可以，如100px：
.bar {
position: fixed;
z-index: 99;
/* 以毒攻毒 */
transform: translateZ(100px);
}
結果：
以上代碼寫好后還是不解決, 記得一定要加內核前綴, webkit,moz等等一定要加
以上就是項目中問題的分享. 希望接下來的小伙伴們好好記住這個坑,努力做好ios的兼容.