iOS 12 cordova应用：SVG的webkit-mask-image显示了奇怪的边框

Question

我正在使用cordova和ExtJS 6开发iOS应用。自更新为[[iOS 12后，某些背景图像显示了一个奇怪的矩形边框（红色圆圈中的图标，在iOS 11中，图标正确显示为“包含不带矩形的i的圆圈”）：Screenshot_App

图标的外观如下：Screenshot_Icon_Photoshop

我已经弄清楚，仅当

SVG

文件用作背景图像时，才会发生此行为。 PNG文件照常呈现，没有边框。这是此元素的我的CSS（跨度）：Screenshot_CSS

.elementeTree .myInfo {
  -webkit-mask-image: url('./icons/information.svg');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 20px;
  background: var(--gray_dark);
}

这是周围元素的屏幕截图：screenshot_dom
我不知道为什么显示边框，有人可以帮忙吗？预先感谢！

Answer 1

其中没有大的逻辑，但是css中的这一行解决了我的问题。

Answer 2

在ios12发布之后，我们也开始在我们的Io​​nic应用程序中看到这一点。在我们的情况下，这似乎与将图标包含在具有属性-webkit-overflow-scrolling: touch;的可滚动父元素中有关。

Answer 3

[当我们将Cordova和EXTJS 6.2组合用于我们的应用程序时，尤其是当SVG图标设置为“ -webkit-mask”时，我也遇到了iOS设备的相同问题。