调整大小后 Safari 13 不应用 CSS

Question

Safari 通常在页面加载时应用任何大小的样式。但是，如果自上次重新加载以来的任何时候窗口已针对移动设备调整大小，则它不会应用桌面样式。

要最轻松地查看/触发行为，请在 Safari 13 中以桌面大小打开站点并查看所需的布局（此处最值得注意的是导航栏）。将浏览器调整为移动布局（确保导航切换到汉堡模式），然后返回到桌面布局。（您也可以先在移动设备上加载站点，然后只需加宽窗口即可。）

在此处查看测试用例：https : //www.davincilabs.com/

正常行为（如负载）：

浏览器调整大小后（仅限 Safari 13）：

如果您检查菜单元素，您将看到应用了 styles-l.css 和 navigation-desktop.css。调整大小后，样式表不再适用。

重要提示：这似乎不是 JavaScript 问题！如果您从开发菜单中禁用 JavaScript，该行为仍然会发生。

回顾一下：

• 仅在 Safari 13 中找到。到目前为止，我们测试过的 Safari 的早期版本没有遇到这种情况。其他经过测试的浏览器（Chrome、Firefox、Edge）不会遇到这种情况。
• 我只在桌面上体验过。这也可能会影响手机，但我的测试用例无法重现；我没有使用任何足够小的断点。
• 初始页面加载始终正确
• 当窗口放大到大于移动断点时触发问题
• Safari 似乎不再将整个加载的样式表文件 (styles-l.css) 应用于页面布局
• 即使关闭 JavaScript 也会发生

这一定是相当罕见的，因为经过大量搜索后我找不到其他事件，但它影响了我正在处理的多个站点。最后，如果您让 Safari 在检查器中重新考虑 CSS 规则（例如通过手动编辑媒体查询的参数），Safari 将立即正确地重绘页面。

Answer 1

我有同样的问题。我不知道为什么，但我只在 Magento 2 上的商店和 Safari 13 上遇到这个问题。（还有其他大型电子商务，如 The Protein Works、Bulk Powders、sigmabeauty ecc）我用 macOS Catalina 10.15.7 修复了它和 Safari 14。