首页 > 代码库 > iOS兼容问题-transform

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

 

iOS兼容问题-transform