I'm experiencing a defect in the Chrome versions 109.0.5414.120 and newer related to some code I wrote using the ResizeObserver. In my code, I'm setting up a ResizeObserver on a hidden div that is added to the dom. In older versions of Chrome, the observer didn't trigger since the div is hidden. In newer versions, the observer is triggered immediately. I'm not sure if my code is wrong or if chrome introduced a bug.
Does anyone know how ResizeObserver should work?
<html>
<body>
<div id="main">
</div>
</body>
</html>
// toggle hidden to true or false
const hidden = true;
const mainDiv = document.createElement("div");
mainDiv.style.background = "blue";
mainDiv.style.width = "100px";
mainDiv.style.height = "50px";
mainDiv.hidden = hidden;
const a = new ResizeObserver((entries) => {
alert("observer triggered");
});
a.observe(mainDiv);
document.getElementById("main")?.appendChild(mainDiv);
if (hidden) {
setTimeout(() => {
alert("timeout expired");
mainDiv.hidden = false;
}, 5000);
}
Run the code: https://jsfiddle.net/cq0L4beu/1/