ARTICLE AD BOX
I have a div that I want to hide if a div inside of it is empty. I've been able to accomplish this by doing the following:
div.inside { background-color: green; width : 100%; height : 100%; /* the magic happens here */ &:has(div.inside-text:empty) { display : none; } }On iOS & iPadOS Safari (using version 26.3), I find that once the inside-text div is empty, the inside div does not hide. This works perfectly fine on Chrome and Firefox.
I have found that if I add the following it works.
/* why is this part needed for iOS/iPadOS? */ &:has(div.inside-text) { display : block; }Is this a bug with iOS/iPadOS Safari or am I missing something? Is there a more elegant way of doing this?
The sample code here hides the inside div if the checkbox is checked (which in turn set the innerHTML of the inside-text to ""). Without the section with display: block; then the inside div does not hide when the inside-text div is empty.
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;
will-change : transform;
}
div.inside
{
background-color: green;
width : 100%;
height : 100%;
&:has(div.inside-text:empty)
{
display : none;
}
/* why is this part needed for iOS/iPadOS? */
&:has(div.inside-text)
{
display : block;
}
}
div.inside div.inside-text
{
background-color: pink;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<input type="checkbox" id="checkbox"> Hide text in bottom div. (White if checked.)
<div class="container">
<div class="inside">
<div class="inside-text" id="inside-text">Text in here</div>
</div>
</div>
</body>
</html>
