桌面 Safari/Chrome 和移动 Safari 之间的字体颜色差异

Question

我正在桌面和移动设备上测试 Safari 和 Chrome 之间的交叉兼容性。字体颜色我设置的比较简单

/* JS inline style...something along the lines of this */
const style = {
    color: 'black',
    WebkitTextFillColor: 'black',
}

<input style={style} value={1}/>

文本在桌面 Chrome 和 Safari 中显示为黑色。它在移动 Chrome 和 Safari 上显示为灰色。这是怎么回事？

Answer 1

我遇到了类似的事情，这对我有用：

input{
   -webkit-text-fill-color: rgba(0, 0, 0, 1); 
   -webkit-opacity: 1; 
   color: rgba(0, 0, 0, 1); 
   background: white;
}

我觉得跟WebkitTextFillColor有关系。

参见this issue。