使用-webkit-transform后CSS过滤器的颜色发生变化：translateZ（0）（iOS）

Question

我对Cordova应用有问题。此问题仅在iOS上出现。在我的应用中，我使用各种SVG，这些SVG通常与

一起使用

background: url('../path/test.svg')

现在，我实现了“主题”功能，该功能使我可以更改应用程序的颜色。默认情况下，我所有的SVG均为白色，我使用JavaScript计算了过滤器invert（），sepia（），saturate（），hue-rotate（），birghtness（），contrast（）来将我的SVG着色为颜色我想要。例如。我想要红色，我插入颜色＃FF0000，然后计算滤镜。要将颜色应用于我的应用程序中的svg，我只需添加CSS类“ filter-icon”，然后使用这些过滤器为元素着色。

当使用Cordova进行构建时，这在Android上可以完美运行！但是在iOS上，我的图像开始闪烁，有时会显示错误的颜色错误的图像。

我在网上看到您需要添加以下行：

-webkit-transform: translateZ(0)

到有问题的元素，因此iOS使用加速来应用过滤器。但是颜色不正确。您可以在我的屏幕截图中看到它（始终以绿色突出显示）。首先是关闭了-webkit-transform的应用程序：关闭了translationZ（0）（您可以看到出现怪异颜色的错误图像），其次是打开了css属性的应用程序（可以看到图标的颜色）改变了。

有人知道这里出了什么问题吗？

我知道，在背景中使用SVG的解决方案：url（'../ path / test.svg'）不好，并且使用嵌入式SVG可以使我更轻松地对其进行着色。但这也非常方便，我可以将“ filter-icon”类拍到白色图像上，然后将其转换为该颜色的图像/图标。

非常感谢所有帮助！