H5 IOS兼容问题

Q1：设置背景色和边框不生效 — 非必然事件

这个问题拿几部真机测试，发现是 IOS16+ 专有问题。且不是所有的H5页面都有问题。

原因：元素设置了border-radius，背景和边框可能不展示。

A1：去掉border-radius。可以用图片代替（用图片代替，这个方案很呆）

A2：给当前元素添加两行样式

 transform: matrix3d(0,0,0);
 will-change: transform;

A3：给父元素添加样式

-webkit-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);

 

Q2：<input> disabled时，整个文本框很模糊

原因：ios默认了disabled属性时透明度为0.3

A1：disabled时，透明度设为1即可

input:disabled, textarea:diabled {
  opacity: 1;
}

补充说明：在reset input:disabled的地方，一般还有两行代码

input:disabled, textarea:diabled {
  color: #ccc;
  -webkit-text-fill-color: #ccc;
}

 -webkit-text-fill-color 指定了文本字符的填充颜色。若未设置此属性，则使用 color 属性的值。

• 同时设置了-webkit-text-fill-color和color，color失效。
• 设置了-webkit-text-fill-color，input的value和placeholder颜色都是该值。
• color只是value的颜色值，并不适用placeholder。

A2：用readonly属性替代disabled

我自己很少用readonly，也不推荐使用。主要是因为如下副作用：

1. readonly可以获取焦点，虽然没有弹起键盘，但是底部出现一个键盘的bar条【左边是上下箭头，右边是完成按钮】。如图：
   
   这时需要处理input，禁止光标进入（可使用下面代码）。

   input:read-only {
       pointer-events: none;
   }

2. :read-only选择器不只是选择具有 readonly 属性的<input> 元素，也会选择所有的不能被用户编辑的元素。input disabled时，:read-only选择器设置的样式同样生效。

   <!--html-->
   <input type="text" value="readonly" readonly><!--input1--><br>
   <input type="text" value="disabled" disabled><!--input2--><br>
   
   /*CSS*/
   input:disabled {/*样式1*/
       color: red;
   }
   input:read-only {/*样式2*/
       color: green;
   }
   
   <!--
     结果：input1、input2的value值都是绿色
     input1：匹配样式2
     input2：匹配样式1和样式2。但样式2后设置，所以样式2生效
   -->

 

Q3：input/textarea 不能输入

原因：CSS reset中代码，通配选择器 (*)的下面一行代码

* {
    -webkit-user-select:none;
    -moz-user-select:none;
    /*-khtml-user-select:none;*/
    -ms-user-select:none;
    user-select:none;
 }

• user-select：用于控制用户是否可以选择文本
• -khtml-前缀，是为了兼容早期Safari 浏览器，可以追溯到Safari2。-webkit-前缀自 Safari 3 以来一直存在。几乎不存在的东西，可以忽略。用-webkit-即可。

A：input / textarea 添加如下代码

input, textarea {
    -webkit-user-select:auto;
}

 

Q4：链接或可点击元素，去掉被点击后，默认的灰色背景色

灰色背景效果如:

 

 A：

html {
    /*-webkit-tap-highlight-color 是个继承属性，所以放在html元素上设置*/
    -webkit-tap-highlight-color: transparent;
}

 

Q5：去掉<button>默认样式？

button {
  -webkit-appearance: none;
}

-webkit-appearance 属性设置为 none ，来禁用 iPhone 中<button>元素的内置样式。

Q6：-webkit-font-smoothing: antialiased;？

font-smooth CSS 属性控制字体渲染时应用的抗锯齿效果。Webkit 实现了名为 -webkit-font-smoothing 的相似属性。该属性仅适用于 macOS。

• auto——由浏览器决定（如果可用，则使用亚像素抗锯齿；这是默认值）。
• none——关闭字体平滑；显示带有锯齿边缘的文本。
• antialiased——在像素（而不是亚像素）级别平滑字体。对于深色背景上的浅色文本，从亚像素渲染切换为抗锯齿渲染可以使其看起来更清晰。
• subpixel-antialiased——在大多数非视网膜显示器上，这将会提供最清晰的文本。

font-smooth具有继承性，可以放在body元素上设置。

antialiased比auto的字体看起来更细一些。

<p>Without font smoothing</p>
<p class="smoothed">With font smoothing</p>

.smoothed {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

浏览器效果截图： 

 

The end.