h5常见问题整理

一、 ios 滚动不流畅

在滚动元素添加

1
2
overflow-y: auto;
-webkit-overflow-scrolling: touch;

二、取消 ios 点击反馈样式

在父级添加以下样式解决

1
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

三、ios 输入框不回弹问题

通过在 focus，blur 时添加事件监听处理页面滚动来解决

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//解决ios页面不回弹问题
export const solveKickBack = (ele) => {
  if (ele && typeof ele.addEventListener === 'function') {
    let v = 0
    ele.addEventListener(
      'focus',
      function () {
        v = window.pageYOffset
      },
      false
    )
    ele.addEventListener(
      'blur',
      function () {
        window.scrollTo(0, v)
      },
      false
    )
  }
}

四、flex-basis：0 在低版本 safari 会导致元素高度为 0，导致子元素无法展示

使用 flex-basis:auto 代替

五、box-shadow 绘制 0.5px 边框在 ios 有兼容问题，需要使用 border 方案代替

1
2
3
4
5
6
7
8
9
10
11
12
13
::after {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 200%;
  height: 200%;
  border: 3px solid currentColor;
  border-radius: 50%;
  transform: scale(0.5, 0.5);
  transform-origin: 0 0;
  content: '';
}

六、避免在滚动区域使用绝对定位元素,否则会跟随滚动，失去定位的默认效果

七、通过模拟器调试 safari 兼容性问题

  • 列出可用设备

    xcrun instruments -s

  • 启动模拟器

    xcrun instruments -w “iPhone 8 (11.2)”

八、textarea 获取焦点时左上角显示小黑点

检查是否设置了 overflow-y:scroll,改成 overflow-y:auto 即可解决

九、safari 禁用元素颜色浅问题

1
2
3
4
input:disabled {
  opacity: 1; //覆盖safari 会默认添加0.4的不透明度
  -webkit-text-fill-color: #8c8c8c; //解决safari颜色浅问题
}

参考链接：从命令行启动 Xcode 模拟器