ios侧适配的坑

这篇文章上次修改于 8 个月前，可能部分内容已经不适用，如有疑问可询问作者。

ios侧适配的坑

前言

最近在修ios端页面的一些bug 只能说safari是现代ie名不虚传

坑

drop-shadow配上滚动元素不渲染

当一个父盒子里的子元素超宽，并且设置成是scroll模式下 有一部分子元素一开始是隐藏着的，只有滚动了才会显示

这时候如果父元素设置了drop-shadow，那么这部分子元素会有一个渲染延迟甚至压根不渲染

CSS
.parent {
  /* ... */
  overflow-y: scroll;
}

.child {
  /* ... */
  filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.5));
}
Copy

解决方案

1. 使用box-shadow代替drop-shadow
CSS
.child {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}
Copy
2. 使用transform: translateZ(0)
CSS
.child {
  transform: translateZ(0);
}
Copy

safari单标签模式渲染问题

safari当前有两种模式 多标签模式和单标签模式 前者导航栏在底部，可以迅速切换 后者导航栏在顶部，底部是一些操作按钮

多标签模式下比较正常 单标签模式下会存在一些问题

问题

  1. 100vh会算上导航栏的高度
  2. 会给浏览器加上橡皮条的操作
  3. 下拉快了会把底部操作栏隐藏掉

解决方案

  1. 使用-webkit-fill-available，它可以正常获取到真正的vh
CSS
@supports (-webkit-touch-callout: none) {
  body {
    min-height: -webkit-fill-available;
  }
}
Copy
  1. 禁用ios的touchStart事件

加passive是因为ios的touchStart事件会默认阻止默认行为，导致无法触发touchmove事件

JS
document.body.addEventListener('touchstart', (e) => {
  e.preventDefault();
}, { passive: false });
Copy

3的禁止和2一致，上面这个也会阻止底部操作栏被隐藏的操作

video元素

这个也是大众很清楚的坑了 我接触到的主要是

  1. 视频播放时，ios会默认全屏播放
  2. ios视频不自动播放
  3. ios视频会显示操作按钮

解决方案

我是使用muted来解决自动播放的问题

以及利用playinline来视频蜜汁放大的问题 playinline真的是个很重要的元素，它可以防止视频全屏播放，保持页面上下文，让用户可以不离开当前页面观看视频

HTML
    <video
      autoplay
      loop
      muted
      webkit-playsinline
      playsinline
      src="https://example.com/video.mp4"
    >
Copy