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应用程序中看到这一点。在我们的情况下，这似乎与将图标包含在具有属性>>> np.array([np.nanmean(array_data[index[0]:index[1]]) for index in array_index], dtype=np.float64)的可滚动父元素中有关。

当我在可滚动元素上禁用该CSS规则时，边框消失。当然，这不是解决方法，因为它破坏了滚动功能，但需要从某个地方开始。

Answer 3

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

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

调整z轴参数并不会严重影响我的实现，但最重要的是，这种方法解决了令人讨厌的异常边框问题。

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

3 个答案: