IOS兼容性问题集

date

1. new Date("2020-05-23 12:00:35").getTime()时间戳获取，在IOS下显示为NaN

解决方法：将时间格式 - 换为 / ，即new Date("2020/05/23 12:00:35").getTime()即可;

2. (**取自网络，未遭遇，待实践**)
Chrome中控件的日期显示格式是2016/05/30 08:00，Safari中日期的显示格式：2016-05-31T08:00，
使用JQuery取值赋值时，代码如下：

正确代码：$("#timeDate').val("2016-05-30T08:30")
报错代码：$("#timeDate').val("2016/05/30 08:30")

iframe

1. 移动端rem布局项目中使用阿里高清方案，第三方在iframe框架中拉起我方H5页面，页面效果显示呈现放大状态

解决方法：
不使用阿里高清方案进行适配布局
将webpack配置中对postcss-pxtorem插件的rootValue字段设置为37.5（采用375 Iphone6画布进行按比设值）

// 阿里高清方案源码如下：

'use strict';
/**
 * @param {Boolean} [normal = false] - 默认开启页面压缩以使页面高清;  
 * @param {Number} [baseFontSize = 100] - 基础fontSize, 默认100px;
 * @param {Number} [fontscale = 1] - 有的业务希望能放大一定比例的字体;
 */

export default init = (normal, baseFontSize, fontscale) => {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.){5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('.').join(''), 10) >= 80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if (!isIos && !(matches && matches[1] > 534) && !isUCHd) {
    // 如果非iOS, 非Android4.3以上, 非UC内核, 就不执行高清, dpr设为1;
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if (!metaEl) {
    metaEl = doc.createElement('meta');
    metaEl.setAttribute('name', 'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};

overflow: scroll、auto 设置无效，列表无法滚动问题

1. 页面中使用了ali-react-table组件, 实现左侧冻结N列，动态填充数据，安卓手机均可正常滑动查看，IOS手机左右滑动正常，上下无法滚动

解决方法： 添加属性字段estimatedRowHeight预设子元素高度,代码如下:

<div ref={cusTableRef} style={{height: `${height}px`, overflow: 'auto', width: 500, height: 300}}>
    <BaseTable dataSource={dataSource} columns={columns} estimatedRowHeight={50} />
</div>

2. 滚动卡顿问题
方案1： 为滚动容器添加css属性-webkit-overflow-scrolling: touch

存在使用了上述css属性无效的情况，可使用transform translate属性设置位移

translateZ 与 z-index在IOS中的层级优先级问题

1. ios上突然出现点击失效的情况，在经过孜孜不倦的查找，得出导致该现象的原因所在：
为解决页面滚动卡顿问题，我方将overflow：scroll滚动方式变更为CSS3属性设置transform、translate属性实现位移滚动效果，结果滚动卡顿的问题决了，但是出现了现在这种点击失效的情况
 - 在android 中以z-index优先级较高，会忽视translateZ；
 - 在IOS中以translateZ的优先级较高，忽视z-index;
 
 最终得以解决的方案： 
 使用CSS属性透传pointer-events
 在需要保持点击的元素上设置pointer-events:auto属性;
 在不能被点击的区域设置pointer-events:none;

大神博文引用:

transform和z-index的问题

iOS Safari浏览器上overflow: scroll元素无法滑动bug解决方法整理

iOS safari浏览器上overflow: scroll元素无法滚动bug深究