記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位移變化來實現