无法在移动版Safari中隐藏/显示内联SVG

Question

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

• 使用grunt
将所有svg组合成svg sprite
• 使用<use>标记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中：

• 如果您使用<use>标记在外部文件中引用svg
• 如果页面加载时其中一些display:none
• 然后在
之后无法用JS显示它们

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

感谢。

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

Answer 1

Chris Coyier发布了this workaround：

使用“width：0px; height：0px;”而不是“display：none”。

到目前为止，我的工作非常棒。