记H5单页遇到的几个ios兼容问题

最近写一个H5活动页，安卓里的表现很不错，写下来很少出现兼容性问题，ios就不一样了，好多问题都出现在ios上（手动狗头）🐶

 

1. ios在微信里弹出软键盘之后，页面底部留白

// 聚焦事件让窗口强制回归
$(document).on("blur","input",function(){ // 这里注意下，如果表单是后来append添加的，不是一开始就有的就用on来监听（至于为啥要用on而不直接用blur事件-原理同click jquery点击事件失效原因和解决办法）

    setTimeout(() => {
      window.scrollTo(0,0);
    }, 100);
});

 

2. 利用伪类重写按钮样式的时候ios里的兼容问题

问题：用伪类重写按钮样式的时候，嵌套了一层，写里面.radio的伪类，就会导致在ios里选择的时候样式没激活或者是只能激活列表中的第一个元素

下面是出现问题的结构和样式

// 页面结构
<ul class="check-list">
  <li>
    <input id="aaa" name="xx" type="radio" value="bbb">
    <label for="aaa">
      <span class="radio"></span>
      <span class="value">aaa</span>
    </label>
   </li>
    <li>
      <input id="bbb" name="xx" type="radio" value="bbb">
      <label for="bbb">
        <span class="radio"></span>
        <span class="value">bbb</span>
      </label>
     </li>
</ul>

样式

.radio {
          width: 16px;
          height: 16px;
          line-height: 11px;
          text-align: center;
          top: 7px;
          border-radius: 50%;
          display: none;
        }
input:checked + label .radio {
          border-color: #fff;
          &::after {
            content: '';
            display: inline-block;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: #ff6e00;
          }
}

这种可能会出现问题，嵌套伪类在ios上可能出现兼容问题，所以在写按钮的时候不妨直接重写样式，或是不要多层嵌套伪类

 

3.css3动画的ios兼容问题

在写从底部飞入这种效果的时候 需要注意，第一次的时候，是用定位的变化来写@keyframe的，后面在ios上出现动画失效的现象

解决：改成用translate位移变化来实现