iOS兼容问题-transform

Posted 2020-08-24 Alyson.fu

　　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/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文链接。非常感谢~