CSS Скрыть div, если внутренний div пуст, на iOS/iPadOS не работает. ⇐ CSS

[Anonymous]

Примечание: этот вопрос был значительно отредактирован, чтобы было более понятно, о чем я спрашиваю...
У меня есть элемент div, который я хочу скрыть, если элемент div внутри него пуст. Мне удалось добиться этого, выполнив следующее:

Код: Выделить всё

div.inside
{
background-color: green;
width : 100%;
height : 100%;

/* the magic happens here */
&:has(div.inside-text:empty)
{
display : none;
}
}

В iOS и iPadOS Safari (с использованием версии 26.3) я обнаружил, что, как только внутренний текстовый блок пуст, внутренний div не скрывается. Это отлично работает в Chrome и Firefox.
Как правильно заставить это работать на iOS/iPadOS?
Пример кода здесь скрывает внутренний элемент div, если флажок установлен (что, в свою очередь, устанавливает для внутреннего HTML внутреннего текста значение "").
Вот как это выглядит без проверки:


Вот как это выглядит в Chrome при проверке:


Вот как это выглядит на iPad (не работает):

Код: Выделить всё

const checkBox1 = document.getElementById("checkbox");
const insideDiv = document.getElementById("inside-text");

checkBox1.addEventListener("change", function(){
if (this.checked) {
insideDiv.innerHTML = "";
} else {
insideDiv.innerHTML = "Text in here";
}
});

Код: Выделить всё

body
{
background-color: gray;
}

div.container
{
background-color: white;
position : fixed;
top : 50%;
left : 50%;
width : 50%;
height : 50%;
transform: translate(-50%, -50%);
border : 1px black solid;
}

div.inside
{
background-color: green;
width : 100%;
height : 100%;

&:has(div.inside-text:empty)
{
display : none;
}
}

div.inside div.inside-text
{
background-color: pink;
}

Код: Выделить всё

Test




 Hide text in bottom div. (White if checked.)



Text in here

Подробнее здесь: https://stackoverflow.com/questions/798 ... ios-ipados