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中的这一行解决了我的问题。

transform: translate3d(0,0,0);

CSS

.icon {
display:block;
width:20px;
height:20px;    
-webkit-mask-position: center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100% auto;
mask-position: center;
mask-repeat: no-repeat;
mask-size: 100% auto;
transform: translate3d(0,0,0);
}
.i-user{
-webkit-mask-image: url(../images/icons/user.svg);
mask-image: url(../images/icons/user.svg);
}

.HTML

<i class="icon i-user"/>

Answer 2

在ios12发布后，我们也开始在我们的Ionic应用程序中看到这一点。在我们的例子中，它似乎与在具有属性的可滚动父元素中的图标有关-webkit-overflow-scrolling: touch;.

当我在可滚动元素上禁用该 CSS 规则时，边框消失了。这当然不是修复程序，因为这会破坏滚动功能，但可以从某个地方开始。

Answer 3

当我们的应用程序使用 Cordova 和 EXTJS 6.2 组合时，特别是当 SVG 图标设置为"-webkit-mask"时，我在 iOS 设备上也遇到了同样的问题。

我没有使用偶尔起作用的transform: translate3d(0,0,0)，而是将其调整为在div 上transform: translate3d(0px, 0px, 1px)SVG 设置为"-webkit-mask"，它不仅在模拟器上而且在设备上都能流畅地工作。

调整 z 轴参数并没有过多地阻碍我的实现，但最重要的是，这种方法解决了令人讨厌的不寻常边框问题。