關於zIndex在safari下涉及3d會失效的坑

澀輝??發表於2019-03-26

今天在寫一個3d輪播圖外掛,無意中踩到了這個坑。 就是在safari瀏覽器下你的元素使用了3d變換的話 那麼同時你這個父級下的所有子元素的zindex都不會生效。 在它那裡認為3d效果是沒有層級的 而是空間。 解決辦法: 可以用translateZ來讓你想顯示的元素顯示出來,當然最上面那層設的肯定最大,而且你也不能設太大,因為他會跑出螢幕,相信不用多說你也懂為什麼會跑螢幕,一個東西在你面前越來越近近到超出那個你所在空間的時候,你肯定就看不見了,所以一般用這個屬性還得配合上scale來讓你的元素跟其他瀏覽器下保持一致的效果 位置可以配合定位或者translateX;

因為蘋果規定,ios的網頁渲染必須用Webkit核心,所以蘋果不管什麼瀏覽器,行為都差不多,因為本質上是Safari的封裝,不過Mac應該就不會,有Mac電腦的人可以試試。

相關文章