Mobile Chrome和WebView上的背景色无法正确显示

Question

我有一个运行Chrome 72的Android平板电脑（ Lenovo Tab 4 10 Plus （TB-X704L））和一个使用最新Chromium的WebView应用程序。

在Chrome浏览器和WebView应用上，背景linear-gradient的颜色都被弄乱了。

这是在其他所有设备（包括台式机上的Chrome 72）上的外观。

这就是平板电脑上的样子

如图所示，第一个按钮由于某种原因使第二个按钮变色。

类似地，在台式机和其他平板电脑上：

与Lenovo 4相比：

这是圆形按钮（例如第一个按钮）的CSS：

background: rgb(221, 221, 221) 
            linear-gradient(rgb(135, 138, 209), rgb(91, 94, 148)) 
            repeat scroll 0% 0% / 100% padding-box padding-box

我尚未在任何其他平板电脑上遇到此问题，因此我想知道是否将此问题隔离到该特定平板电脑上。更令人困惑的是，同一设备上的Firefox显示正确的颜色。

我没有用的东西：

1. 检查了“辅助功能”中的颜色设置，以查看是否启用了类似于色盲模式的设置。不是。
2. 转到chrome://flags >> Force color profile，然后尝试每种颜色配置文件。
3. 将rgb(rrr,ggg,bbb)更改为十六进制代码。
4. 恢复出厂设置。

有什么想法会导致这个奇怪的问题吗？

谢谢！

Answer 1

也许这将对您有所帮助：我在另一个论坛上阅读了将rgb(rrr,ggg,bbb)更改为rgba(rrr,ggg,bbb)的技巧。

Answer 2

尝试了一百万种不同的方法后，终于明白了！

最初，按钮是使用

创建的

background-image: linear-gradient(...)

但是，当我将其更改为

background: linear-gradient(...)

一切都神奇地正确呈现。

我真的很想知道是什么原因造成的。