html - 调整大小后 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 修复了它。