記H5單頁遇到的幾個ios兼容問題 jquery點擊事件失效緣由和解決辦法

最近寫一個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位移變化來實現