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下有点不兼容。也许是我想错了,有知道的大神可以指出,虚心接受~~~