Не удается переключаться между отображением: содержимым и отображением: нет в Safari

Question

Не уверен, что кто-то еще сталкивался с этим - я использую Safari 12.

У меня есть очень простая установка, чтобы продемонстрировать эту ошибку.

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;
}