Javascript Safari在用户交互时隐藏元素

我从来没有遇到过这个问题，所以我完全更新了我的mac+Safari（macOS Big Sur 11.2.3，Safari 14.0.3）。问题是，我在页面上使用的任何js交互都只在Safari中有缺陷（在FF和Chrome中都能完美工作）。您可以在中看到我使用的动画类型（逐渐隐藏+通过最大高度显示元素+单击元素时不透明度）

问题是，Safari在使用这些工具时表现得非常怪异。有时，单击的元素也会消失；重置动画时，消失的元素无法重新出现；有时一个未点击的元素在悬停时消失；等真奇怪。所有这些都没有控制台/js错误报告，在FF和Chrome中工作非常顺利

在互联网上，我发现了无数关于Safari中类似行为的报告，但答案大多涉及js/css错误。我的脚本甚至是用ES5编写的。 我现在检查了大约100次，没有这些错误

然后我遇到了，这让我试图改变字体。事实上，当我使用默认浏览器字体如Arial等时，Safari中的一切都可以正常工作，但这显然不是我的客户想要的。 该网站的字体是Bank Gothic Light&Bank Gothic Medium，我使用

ttf

和

woff

文件作为字体源文件，我在样式表中使用

@font-face

定义为自定义字体，然后在样式表中通过

font-family

应用它们。因此，动画中提到了Safari中的怪异行为。只需将相关元素的字体更改为Arial即可

---

理想情况下，我希望每个动画都能正常工作，同时在所有FF、Chrome和Safari中都坚持哥特式字体。有什么线索可以在这里做什么/为什么会发生这种情况吗？

通过从另一个来源获取新的字体源文件（ttf和woff）来解决这个问题；似乎是有缺陷的（在我的HTML、CSS、JS、PHP中没有任何更改，无论在哪种代码中都没有！）。我把问题的标题改得更一般，因为人们可能（至少对我来说是这样）完全不认为这些Safari渲染问题是由于使用的字体造成的。。。为避免出现相同问题的人可能不需要搜索回复数小时