Safari 在用户交互时隐藏元素
Safari hiding elements upon user interaction
我从来没有遇到过这个问题，所以我完全更新了我的 mac + Safari（macOS Big Sur 11.2.3，Safari 14.0.3）。问题是我在页面上使用的任何 js 交互仅在 Safari 中存在错误（在 FF 和 Chrome 中完美运行）。您可以在 this snippet.
中看到我使用的动画类型（逐渐隐藏 + 通过最大高度显示元素 + 单击元素时的不透明度）
问题是 Safari 对这些的行为很奇怪。有时，被点击的元素也会消失；重置动画时消失的元素无法重新出现；有时，未单击的元素之一会在悬停时消失； ETC。;真的很奇怪的事情。所有这一切都没有报告控制台/js 错误，并且在 FF 和 Chrome.
中工作非常顺利
在 Internet 上，我发现了无数关于 Safari 中类似行为的报告，但大多数答案都提到了 js / css 错误。我的脚本甚至是用 ES5 编写的。
我现在检查了大约 100 次，有 none 个这样的错误。
然后我遇到了this post，这让我尝试更改字体。事实上，当我使用 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 - 渲染问题是由于使用的字体引起的......为了避免那些具有相同issue可能不需要搜索几个小时的回复..
我从来没有遇到过这个问题，所以我完全更新了我的 mac + Safari（macOS Big Sur 11.2.3，Safari 14.0.3）。问题是我在页面上使用的任何 js 交互仅在 Safari 中存在错误（在 FF 和 Chrome 中完美运行）。您可以在 this snippet.
中看到我使用的动画类型（逐渐隐藏 + 通过最大高度显示元素 + 单击元素时的不透明度）问题是 Safari 对这些的行为很奇怪。有时，被点击的元素也会消失；重置动画时消失的元素无法重新出现；有时，未单击的元素之一会在悬停时消失； ETC。;真的很奇怪的事情。所有这一切都没有报告控制台/js 错误，并且在 FF 和 Chrome.
中工作非常顺利在 Internet 上，我发现了无数关于 Safari 中类似行为的报告，但大多数答案都提到了 js / css 错误。我的脚本甚至是用 ES5 编写的。 我现在检查了大约 100 次，有 none 个这样的错误。
然后我遇到了this post，这让我尝试更改字体。事实上，当我使用 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 - 渲染问题是由于使用的字体引起的......为了避免那些具有相同issue可能不需要搜索几个小时的回复..