iOS 12 cordova 应用程序：SVG 作为 webkit-mask-image 显示奇怪的边框答案

【问题标题】：iOS 12 cordova app: SVG as webkit-mask-image shows strange borderiOS 12 cordova 应用程序：SVG 作为 webkit-mask-image 显示奇怪的边框
【发布时间】：2019-02-24 16:19:26
【问题描述】：

我正在使用 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

我不知道为什么会显示边框，有人可以帮忙吗？提前致谢！

【问题讨论】：

是链接元素中的span元素吗？试试outline: none 或-webkit-appearance: none.. 甚至border: 0
我刚刚在问题中插入了部分 DOM 的屏幕截图。不幸的是，outline: none 和 -webkit-appearance: none 或 border: 0 似乎不起作用。看起来矩形是 SVG 的一部分。我可以像更改图标颜色一样更改矩形的颜色 (background)。您还有其他建议吗？

标签： css svg webkit background-image ios12

【解决方案1】：

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

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

【讨论】：

我将应用更改为使用 PNG 而不是 SVG，从而解决了“边界问题”。如果您希望我检查您的答案，我可以改回 SVG 吗？无论如何感谢您的贡献！

【解决方案2】：

里面没有什么大逻辑，但是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"/>

【讨论】：

这行css是在哪里插入的？在包含 svg 图标的类的 css-config 中（在我的例子中：“.elementeTree .myInfo”）？我尝试了您的建议，但它并没有为我解决问题:(
不幸的是，您的建议并没有为我解决问题。无论如何，谢谢！
固定添加变换： translate3d(0,0,0);到 svg css 类

【解决方案3】：

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

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

调整 z 轴参数并没有对我的实现造成太大阻碍，但最重要的是，这种方法解决了令人烦恼的异常边界问题。

【讨论】：