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

时间: 2024-10-29 11:56:31

iOS兼容问题-transform的相关文章

Clipboard 自动复制功能,ios复制失败,换方案 user-select: text ;长按复制 (ios 兼容,长按复制)

Clipboard 自动复制功能,嵌套app内跳转的页面,ios 自动复制失败(该ios机子,微信,浏览器打开复制没有问题) 暂时换方案    user-select: text ;长按复制 (ios 兼容低版本,长按复制) 最好的 方案是让 app 给出原生复制的 方法.直接调用 可 自动复制 <div class="item-detail"> <div class="line" style>  <!-- user-select: t

ios 兼容IPV4和IPV6网络通信

前言: 苹果官方出了新的规定,要求新上架的app都必须单独支持ipv6-only的网络. 准备工作: 搭建IPV6测试环境:http://blog.csdn.net/potato512/article/details/51680203 问题的提出: 在ios应用的开发中,如果项目中网络层用的是SOCKET 底层 的api.需要在工程做 兼容ipv4和ipv6网络环境的处理. 解决方案: 服务器地址配置为域名,通过解析域名的方式,得到 该域名映射的ip地址,再通过这个ip地址,去进行网络通信. 我

ios兼容

border-radius在ios的兼容:-webkit-appearance:none;  加上这个属性,可以保证安卓和ios的圆角一致 上传图片,这段没有代码没有管图片拍摄的方位, var _this = this; var target = e.target; var FileReadered = new FileReader(); var image = new Image(); let img1 = e.target.files[0]; //读取图片数据 FileReadered.re

iOS开发之transform

transform主要应用于动画 1.让一个按钮每次向上移动100的距离 UIButton *head = (UIButton *)[self.view viewWithTag:10]; head.transform = CGAffineTransformTranslate(head.transform, 0, -100); transform是一个状态,并不能改变控件的真实位置(以起始位置为参照,起始位置为(0,0),即真实位置为(0,0)),如果使用CGAffineTransformMake

IOS 开发中Transform的使用

Transform 主要用来改变一个视图对象的位置.尺寸或者旋转角度 frame:也可以位置/尺寸 bounds:尺寸 center:位置 最常用的三种方法 someView.transform=CGAffineTransformMakeRotation(角度) 旋转 -此角度是弧度制  m_pi      m_pi_2  m_pi_4 -  正数是顺时针  负数是逆时针 someView.transform=CGAffineTransformMakeTranslation(x,y) 向x方向走

移动端ios兼容问题

IOS系统bug: 1)input无法输入的问题: -webkit-user-select:none;改成-webkit-user-select:auto: 2)滚动不流畅(overflow-y:auto) -webkit-overflow-scrolling: touch; 注:此属性和overflow-y:auto冲突 原文地址:https://www.cnblogs.com/web-wjg/p/8578987.html

ios兼容webp格式的图片

小程序的富文本编辑框里上传了webp格式的图片,安卓手机可显示,IOS手机不能正常显示,解决办法: filterTag (str) { if (str) { let mapObj = {} mapObj['<img'] = '<img style=\"max-width:100%;height:auto;\"' mapObj['article>'] = 'div>' mapObj['header>'] = 'div>' mapObj['footer&

select标签模拟placeholder属性与一般操作(最重要的是ios某一项被选中的兼容)

1.为了统一样式,常常要模拟placeholder <select> <option disabled selected hidden>请选择</option> <option>what</option> <option>the</option> <option>hell</option> </select> 2.select选中的值和某个值要被选中(ios兼容) <select

ipa包兼容性大作战!WeTest iOS深度兼容测试全新升级

2018年,移动端适配话题热闹无比,有iOS新版本新机型发布,全面屏.异形屏.曲面屏争相斗艳,从而产生了各类特殊的屏幕分辨率设备. 正是因为这些特殊分辨率,导致2018年手机设备频繁出现适配问题,如屏幕显示不全.双边未占满.顶部导航栏高度不对导致部分被遮挡,包括之前经常被用户提及的黑屏.闪退.安装失败等问题.特别是iOS设备在18年推出三款新的 iPhone:6.1英寸的iPhone XR.5.8英寸的iPhone XS.6.5英寸的iPhone XS Max.加上iOS版本升级成iOS 12,