移动Chrome和WebView上的背景颜色无法正常显示

Question

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

在Chrome浏览器和WebView应用程序中，背景linear-gradient颜色奇怪地搞砸了。

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

这就是它在平板电脑上的样子

如图所示，第一个按钮由于某种原因采用第二个按钮的颜色。

同样，在台式机和其他平板电脑上：

而联想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(...)

一切都神奇地渲染得恰到好处。

我真的很想知道是什么原因引起的。