无法在Safari中显示：content和display：none之间切换

Question

不确定是否有其他人遇到过这个 - 我正在运行Safari 12。

我有一个非常简单的设置来演示这个bug。

HTML：

<div class="contents">
  <p>Hello!</p>
</div>

CSS：

.contents {
  display: contents;
}

.hide {
  display: none;
}

请参阅此CodePen：https://codepen.io/ericxgao/pen/dreqWp

如果你去CodePen，检查文本，然后将包装div的类从“内容”更改为“隐藏”，实际上没有任何实际发生。在其他所有浏览器中，文本消失但在Safari中，它似乎不适用。这似乎是这里记录的错误：https://bugs.webkit.org/show_bug.cgi?id=188259

我很好奇这里是否有任何聪明的解决方法。在不对使用此切换的现有代码进行检修的情况下，我可以保留此行为的最简洁方法是什么？

Answer 1

我最终使用了这个，直到Safari修复了这个问题。

.hide * {
    visibility: hidden;
    width: 0;
    height: 0;
}