javascript - 在移动版 Safari 中隐藏/显示内联 SVG 时遇到问题

Question

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

• 使用 grunt 将所有 svg 组合成一个 svg sprite
• 在 <use> 中引用它们标签阿拉this article

在大多数情况下，一切都运行良好。但是，当我尝试使用 JS 隐藏/显示它们时，我在 iOS 浏览器上遇到了问题 - http://codepen.io/meanspa/pen/vEGERZ

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

因为对于这个代码笔，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 :

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

到目前为止对我来说效果很好。