【发布时间】：2021-07-12 18:41:36
【问题描述】：
我从来没有遇到过这个问题，所以我完全更新了我的 mac + Safari（macOS Big Sur 11.2.3，Safari 14.0.3）。问题是我在我的页面上使用的任何 js 交互都只在 Safari 中被窃听（在 FF 和 Chrome 中完美运行）。您可以在this snippet 中看到我使用的动画类型（逐渐隐藏 + 通过最大高度显示元素 + 元素点击不透明度）。
问题是 Safari 对这些行为非常奇怪。有时，被点击的元素也会消失；动画重置时消失的元素无法重新出现；有时未点击的元素之一会在悬停时消失；等等。;真的很奇怪的事情。所有这一切都没有报告控制台/js错误，并且在FF和Chrome中一切都非常顺利。
在互联网上，我发现了无数关于 Safari 中类似行为的报告，但大多数答案都提到了 js / css 错误。我的脚本甚至是用 ES5 编写的。 我现在检查了大约 100 次，没有出现这些错误。
然后我遇到了this post，这让我尝试更改字体。事实上，当我使用默认浏览器字体作为 Arial 等时，一切在 Safari 中也能正常工作，但这显然不是我的客户想要的。
该网站的字体是 Bank Gothic Light & Bank Gothic Medium，我使用 ttf 和 woff 文件作为字体源文件，我在样式表中使用 @font-face 将其定义为自定义字体，然后我应用他们通过我的样式表中的font-family。有了这个，动画在 Safari 中具有提到的奇怪行为。只需将相关元素的字体更改为 Arial 即可。
理想情况下，我希望每个动画都能正常工作，同时在所有 FF、Chrome 和 Safari 中坚持使用 Gothic 字体。任何线索在这里做什么/为什么会发生这种情况？
【问题讨论】：
标签： javascript html css fonts safari