gpt4 book ai didi

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

转载 作者:塔克拉玛干 更新时间:2023-11-02 21:18:58 24 4
gpt4 key购买 nike

我正在尝试为我们的图标使用内联 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 及更早版本上注意到此问题,看起来它已在较新版本中修复。

最佳答案

Chris Coyier 发布 this workaround :

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

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

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

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com