0

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/

MonkBen
  • 546
  • 5
  • 21
  • 1
    You're in case 1 from the linked answer: your element wasn't in the DOM yet, then it gets inserted -> fires. That's the specced behavior, and you were relying on a browser bug. (note that things would be a bit more blurry if you did append the element before calling `observe`: the element would effectively have its display set to none only in the next style recalc, which would happen after the observer is already set... But here your case is clear.) – Kaiido Feb 10 '23 at 01:20
  • 1
    FWIW, it's been fixed in https://chromium.googlesource.com/chromium/src/+/f813526b21b221af7d43314f8c4841f579b576e0 which was reported in https://crbug.com/1128016 – Kaiido Feb 10 '23 at 01:51

0 Answers0