ios中h5常见bug记录-欢迎补充

范小饭
1,546 阅读2分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天

1、ios transition translate 闪屏问题

过渡动画（在没有启动硬件加速的情况下）会出现抖动，就会造成一些奇怪的现象

最简单的处理方式，开启硬件加速

.css {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

2、关于使用overflow：hidden，在ios下卡顿的问题解决

几年前的一个bug，印象很深刻，当时这个问题可是找到解决办法的我眼泪掉下来，尝试了n中方法，什么用swipter之类的，但是最后效果都不好，结果最终的解决办法就是一行代码

在css 属性上添加 -webkit-overflow-scrolling: touch;

效果我就不演示了，肯定超过你的预期。小伙伴可以在ios中前端开发时但用无妨。

3、ios下动态改动h5页面title

在一些混合app内，ios的jsBridge是基于iframe进行通信的， 当需要动态的更改ios页面的title，直接等待接口返回再去设置document.title = "我是接口返回的页面title";就不会生效，因为此时dom已基本加载完毕，ios下更改title就需要换一种方式，不过笔者亲测有效

document.title = "我是接口返回的页面title";
if (/ip(hone|od|ad)/i.test(navigator.userAgent)) {
    var i = document.createElement('iframe');
    i.style.display = 'none';
    i.onload = function() {
        setTimeout(function(){
            i.remove();
        }, 0)
    }
    document.body.appendChild(i);
}

4、输入框input fix固定在底部，当div获得焦点后，fix失效，底部fix固定的部分会乱跳

image.png

来看看解决方式。

先来获取到底部fix固定的div的高度，假设这个元素的class名字是item10

var footHeigt = $(‘.item10’).height();

因为只有ios会有这种问题，所以针对ios，当我input获得焦点的时候，

if(navigator.userAgent.indexOf(‘iphone’)){    
 $(‘.item10’).css{         
     position:static;         
     bottom:0px;         
     margin-top:-footerHeight     
}}

当input失去焦点的时候，我们再把它的input定位还原到页面底部

if(navigator.userAgent.indexOf(‘iphone’)){     
    $(‘.item10’).css{          
        position:fix;
        bottom:0px;
}}

5、在safair中，当transform和z-index一起使用的话会产生z-index失效的情况

有时会做一些css3的的动画与z-index同用，还有的那种下拉刷新和上拉加载的插件中也多会用到这中css3的属性 ，所以不经意间就会出现这种问题。

在Safari浏览器下，此Safari浏览器包括iOS的Safari，iPhone上的微信浏览器，以及Mac OS X系统的Safari浏览器，当我们使用3D transform变换的时候，如果祖先元素没有overflow:hidden/scroll/auto等限制，则会直接忽略自身和其他元素的z-index层叠顺序设置，而直接使用真实世界的3D视角进行渲染。

IE, Chrome, FireFox都是遵循这种渲染的，但是，Safari浏览器却自己任性了一把。直接把z-index:99给无视了，对无视了，在座的诸位也不要怀疑是不是99还不够大，就算是998，这也是这般渲染，因为Safari是忽略z-index，而不是IE6,IE7那种z-index计算bug，类似如下中

image.png 解决方案如下 第一种解决方式是给所有父级设置overflow：hidden； 第二种方式是给z-index的元素，设置 transform: translateZ(100px);

亲测好使，这个方法是参考张鑫旭的博客上的解决方案来的，写的真完美。

6、在ios上日期不能识别"2021 -04-01"这样格式的识别不了,所以需要转换一下

const data1 = '2021-  04-01'
function clear(str) {
    str = str.replace(/-/g, "/");//取消字符串中出现的所有-
    str = str.replace(/\s/g, "") //去掉字符串内出现的所有空格
    return str;
}
console.log(clear(data1)) //结果 2018/09/09

7、ios去除默认样式

(1).input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 
  这里的-webkit-appearance: none; 意思是 样式可以自定义
(2).另外行高问题：(加上-webkit-前缀)
   line-height:30px; -webkit-line-height:1;
(3).圆角问题（加上-webkit-前缀）
   -webkit-border-radius:3px;border-radius:3px;
(4).网页安全色（都用rgb格式）
   background-color:rgb(255,255,255); background:rgb(255,102,102); color:rgb(255,255,255);

8、iOS12新增一个功能就是可以自动填充验证码，当你点击键盘上面的验证码时，如果这时你监听了UITextFieldTextDidChangeNotification，那么这时你会收到两个相同的回调。

这时候可以手动控制input的长度，假设验证码是6位数，当在<input type="text"> 或<input type="password"> 的情况下，可以用maxlength控制长度；当在<input type="number">时，maxlength失效，这时候建议用

<input type="number" oninput="if(value.length>6)value=value.slice(0,6)" />

9、iOS 上拉边界下拉出现白色空白

手指按住屏幕下拉，屏幕顶部会多出一块白色区域。手指按住屏幕上拉，底部多出一块白色区域。

在 iOS 中，手指按住屏幕上下拖动，会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器，容器自然会被拖动，剩下的部分会成空白。

解决方案： 监听事件禁止滑动

1. touchstart ：手指放在一个DOM元素上。
2. touchmove ：手指拖曳一个DOM元素。
3. touchend ：手指从一个DOM元素上移开。

document.body.addEventListener('touchmove', function(e) {
    if(e._isScroller) return;
    // 阻止默认事件
    e.preventDefault();
}, {
    passive: false
});

10、iphon X适配

if (/iPhone\s(X|11|12|13)/.test(navigator.userAgent)) {
    $body.addClass('iphoneX');

    if (isBaiduLicai()) {
        $body.addClass('iphoneX-question');
    }
}
// 根据需要处理
.iphoneX-question {
    padding-bottom: 56px;
}
avatar
文章
阅读
粉丝