ios H5踩坑之旅汇总-CSDN博客

本文链接：https://blog.csdn.net/weixin_36922394/article/details/102747303

1. position: absolute；

问题：position: absolute 的元素不能完全脱离父节点，不能完全的意思是能够在父节点内绝对定位，但不能超出父节点绝对定位，即便父节点不是relative。
解决： 如果需要做全屏的图片，则需在根节点body下创建一个新元素。例如：

<body>
  <div style="position: fixed;top: 0;bottom: 0;left: 0;right: 0;">
    <img src="xxx.jpg" style="width: 100%;height: 100%;">
  </div>
</body>

进展： ios11以后无此bug

2. user-select: none

问题： 设置全局user-select: none 会导致输入框无法输入的问题
解决： *:not(input, textarea) { user-select: none; }

3. DOM.style = ‘xxx’;

问题： DOM.style = 'width: 10px;height: 10px';不生效
解决1： DOM.style.width = '10px'; DOM.style.height = '10px';
解决2： DOM.style.cssText = 'width: 10px;height: 10px';

4. 微信开发新坑iOS上虚拟键盘引起的触控错位

问题： 微信开发新坑iOS上虚拟键盘引起的触控错位。视野看到的元素跟元素实际位置不一致，导致元素不能外部触发事件
解决： 在输入框失焦时调用

let top = target.getBoundingClientRect().top;
window.scrollTo(0, 0);
window.scrollTo(0, top);

参考： 微信开发新坑iOS上虚拟键盘引起的触控错位

5. 滑动顺滑

问题1： 解决顺滑问题
解决1： 在需要overflow的元素上增加-webkit-overflow-scrolling: touch;，但是这样会引起一些恶心的问题，看以下问题x
问题2： 无法向下滑动，一滑把整个窗口都向上移
解决2： 引入inobounce.js，但是仍然存在个别情况会失败，再看解决2.1
解决2.1： 在需要overflow的元素上加上height: 101%，大于100即可
问题3： 某些机型的文字初始位置在可视窗口范围外的文字，在滚动到可视范围时不能显示，需点击一下文字所在的元素才出现，但在可视范围外的文字又进入不能显示的状态
解决3： 在文字所在的元素或其父级元素上增加transform: translateZ(0)或者transform: translate3d(0, 0, 0)，使用硬件加速即可
参考： iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理

6. iframe宽度大于父容器

问题： 如果iframe内的元素宽度是绝对值xxxpx，大于父容器宽度，则iframe会被撑大
解决： 在iframe外加一个容器，并设置相应style，iframe本身也要设置相应style和attribute。但最难理解的是*width这个hack

<wrapper style="overflow:auto;-webkit-overflow-scrolling:touch;">
  <iframe scrolling="no" width="100%" height="100%" style="width: 1px;min-width=100%;*width=100%;height:100%;"></iframe>
</wrapper>

参考： IOS webview iframe 宽度超出屏幕解决方案

7. 轻触输入框不能唤起软键盘

问题： 轻触输入框不能唤起软键盘
解决： 在点击输入框时触发输入框的focus操作@click="e => e.target.focus()"
参考： 移动端input输入框，首次点击能拉起键盘，再次点击拉不起键盘

8. 微信二维码不能识别

问题： 微信二维码不能识别
解决： 设置了<body style="all: initial;">，暂未得知原理

9. 刘海屏和全面屏的底部输入框点击聚焦不稳定

问题： 刘海屏和全面屏的底部输入框点击聚焦不稳定
解决： 底部输入框增加csspadding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);
参考： safe-area-inset-bottom iphone

10.视频重放没有画面

问题： 当一个视频播放完毕，点击重播时，画面全黑没有动画
解决： 将视频设置成内联模式

<video
  "playsinline"=true
  "webkit-playsinline"=true
  "x5-playsinline"=true (微信)
></video>