css - iOS 12 Cordova 应用程序 : SVG as webkit-mask-image shows strange border

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"/>