Html Can'；t在Safari中在显示：内容和显示：无之间切换

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

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

HTML:

请参阅此代码笔：

如果转到代码笔，检查文本，然后将包装div的类从“contents”更改为“hide”，那么实际上什么也不会发生。在其他浏览器中，文本都会消失，但在Safari中，它似乎不适用。这似乎是此处记录的一个错误：

---

我很好奇这里是否有聪明的解决办法。在不修改使用此切换的现有代码的情况下，我可以用什么最干净的方式来保留此行为？

我最终使用了此切换，直到Safari解决了此问题

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

---

直到Safari解决了这个问题，我才开始使用它

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

---

您同意使用Javascript吗？此项重复。请看这里：不是一个重复-该用户在他们的CSS中有一个错误。我没有，这是Safari的一个已知错误，正如我上面所示。我正在寻找显示的替代方案：无-据我所知，这不是我的代码的问题@Vapporwashmake我更喜欢在类中使用CSS。你同意使用Javascript吗？这个项目是重复的。请看这里：不是一个重复-该用户在他们的CSS中有一个错误。我没有，这是Safari的一个已知错误，正如我上面所示。我正在寻找显示的替代方案：无-据我所知，这不是我的代码的问题@Vapporwashmake我更喜欢在类中使用CSS。

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