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

【问题标题】：SVG as background image crashes safari on iosSVG 作为背景图像在 ios 上崩溃 safari
【发布时间】：2013-02-06 18:25:43
【问题描述】：

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

精灵是这样创建的：

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;
}

【问题讨论】：

你有一些代码吗？就在今天，我花了几个小时在移动 Safari 中进出测试 SVG ;-)
我已经更新了问题。

标签： ios css svg

【解决方案1】：

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

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

【讨论】：