iOS兼容問題-transform

　　iOS兼容問題-transform　

　最近在弄一個bug，公司在弄一個閱讀器的軟件，在閱讀頁點擊下面的導航目錄時，目錄能夠從左至右的方向緩慢出來，用的

transform: translate(255px, 0px) translateZ(0px)；  //目錄出現

transform: translate(0px, 0px) translateZ(0px);    //目錄隱藏

來進行目錄的顯示和隱藏。在安卓手機能夠自由切換，並且頁面正常但是在蘋果手機上就不行。在蘋果手機上進行閱讀是點擊目錄然后在進入閱讀頁，屏幕向右側滑動會出現白色空白且大小目錄一致，然后我就覺得是目錄影響了閱讀頁，開始我認為是因為position定位的問題，原本是position：relative；后來我改成了absolute；空白是沒有了；但是引出了一系列的原本沒有的bug！！！

　　所以這個解決方法不行。方寸大亂.....

　　后來實在沒辦法了，我就改掉了$Woread.transUtil(".rb_all, .raad_box_ml", 0);這樣的切換寫法也就是上方的transform改成了

　　　　//目錄出現，閱讀頁的左邊left定位到目錄的右側位置

　　　　$(".raad_box_ml").css("left","0px");
　　　　$(".rb_all").css("left","255px");

 

　　　　//目錄隱藏，閱讀頁的左邊left定位到屏幕左邊緣

　　　　$(".raad_box_ml").css("left","-255px");  //.raad_box_ml目錄的class，255px也為目錄的寬度
　　　　$(".rb_all").css("left","0px");   //.rb_all為整個閱讀頁（不包括目錄）的class

　　這樣寫 IOS和Android都能兼容了。

　　這個問題困擾了我3天左右，我覺得的是transform在IOS下有點不兼容。也許是我想錯了，有知道的大神可以指出，虛心接受~~~

 

作者：Aylson.Fu
出處：https://www.cnblogs.com/formybestlife/
本文版權歸作者和博客園共有，歡迎轉載，但未經作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接。非常感謝~