javascript - 在移动 Safari 中隐藏/显示内联 SVG 时出现问题

我正在尝试为我们的图标使用内联 SVG。具体来说我是:

• 使用 grunt 将所有 svg 组合成一个 svg sprite
• 使用 标签内联引用它们 ala this article

大部分情况下都运行良好。但是，当我尝试使用 JS 隐藏/显示 iOS 浏览器时遇到问题 - http://codepen.io/meanspa/pen/vEGERZ

  $('.expand-link').click(function(){
  $('.expand-link').toggleClass('clicked');
});

因为对于这个 codepen，SVG 定义在 DOM 中，所以它可以正常工作，但是如果你将它们移动到外部文件并尝试在移动 Safari 中使用它，原来隐藏的 SVG (.icon-contract)当你点击它时不会显示。事实上，我发现让这项工作的唯一方法是最初将 .icon-contract 设置为 display:block ，然后在 JS 中设置延迟，以便在几百之后隐藏它毫秒。

总结一下，它看起来像在移动 Safari 中:

• 如果您使用 标签来引用外部文件中的 svg
• 如果其中一些在页面加载时是 display:none
• 那他们事后就不能用JS显示了

还有其他人遇到过这个问题吗？

谢谢。

更新:正如 Salmonface 指出的那样，仅在 iOS 7 及更早版本上才注意到这一点，看起来它已在较新的版本中得到修复。

---

Best Answer-推荐答案

Chris Coyier 发布 this workaround :

使用“宽度:0px；高度:0px；”而不是“显示:无”。

到目前为止对我来说工作得很好。

关于javascript - 在移动 Safari 中隐藏/显示内联 SVG 时出现问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27490104/