苹果ios浏览器踩过的坑

1.click事件；

要在css中加上cursor: pointer;ios的点击才有效

2.margin-bottom问题；

在ios上，最后一个元素加margin-bottom无效。

3.时间转化问题

由时间转时间戳时

new Date('2019-07-3 11:22:32').getTime(); //苹果显示NAN

在ios上 new Date("2019-07-3 11:22:32".replace(/-/g,'/')).getTime(); //问题解决

苹果不识别-。要写成 /

4.position: fixed中的input框聚焦软键盘弹出，IOS下会有光标错位问题

// IOS 9 实测有效
html, body {
  -webkit-overflow-scroll: touch;
}

5.滚动穿透问题（实测的此方法兼容性最好，兼容IOS，实测iphone X也有效）

body.overflowHide {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

弹窗展开时给body增加class="overflowHide"，同时记录

const top = window.scrollY;

动态设置top为-${top}px
弹窗收起时移除该class，设置top为0，调用window.scrollTo(0, top)恢复原滚动位置

 

转载于:https://my.oschina.net/u/3549294/blog/3068924