Safari 在注入元素后不会隐藏带有 display:none 的元素

Question

当用户单击“阅读更多”按钮时，我使用 JS 库 MagnificPopup 在我的网站上显示弹出窗口。 MagnificPopup 显然采用了我的 html，将其显示在不同的位置，并在关闭时将 html 注入回原来的位置。除了 Safari 之外，这在所有主要浏览器中都可以正常工作。

由于某种原因，当弹出窗口关闭并且 html 被注入回原来的位置时，Safari 不会正确隐藏该元素，尽管我相信它应该这样做。周围的元素有显示：无，我什至尝试将宽度，高度，填充和边距全部设置为0，但它不起作用。

一旦调整窗口大小，元素就会再次隐藏，但除非调整窗口大小，否则布局就会混乱。

这是之前的布局：

这是单击“阅读更多”按钮并关闭弹出窗口后的布局：

您可以在这里看到问题：https://demo.divi-pixel.com/creative/testimonials/

有人可以解释为什么会发生这种情况以及为什么它只发生在 Safari 中吗？有人有解决方法吗？

Answer 1

您尝试过

visibility:hidden

和

display:none

一起使用吗？

某些浏览器不会将元素渲染为仅使用

display:none

隐藏，而是为元素保留“虚拟”空间。包含这两个指令应该在任何时候、任何地方都有效。