ios - SVG 作为背景图像在 ios 上崩溃 safari

Question

我在网站上使用 SVG 精灵。它们在缩放页面之前呈现良好 - 几乎在 90% 的情况下 Safari 崩溃并进入桌面。这发生在 iPad 3 和 iPhone 4 上。有人遇到过同样的问题吗？在谷歌上找不到任何东西，也不知道从哪里开始。

精灵是这样创建的：

i.sprite {
    background-image: url("sprites.svg");
    background-repeat:no-repeat;
    display:inline-block;
    height: 28px;
    width: 29px;
    vertical-align:middle;
    font-style:normal;
    font-size:0;
}

Answer 1

不打算完全阻止你，但是在 webkit 上的 SVG 存在很多问题，无论是在 Chrome 和 Safari，桌面和移动设备上。除了不完整的实现，如果你想要完整的跨浏览器支持，必须忘记 SVG 的某些部分。我用简单的 foreignObject 元素使 webkit 崩溃：http ://webkit-crasher.esviji.com/

但是，我为http://gasteroprod.com/右上角的 3 个图标使用了 SVG 图像精灵，没有任何问题：