Browser-Erfrierung in ResizeObserver

[Nico R.]

Hallo zusammen,

ich überwache das Resizen eines Elements bzw. des Screens und möchte - je nachdem, ob es im Quer- oder Hochformat dargestellt wird - eine Klasse einbinden. Nur leider zittert das ganze beim Ändern des Browserfenster (mit eingeblendeten Developer Tools) furchtbar herum, der Observer macht sich anscheinend fest. Oder liegt es an etwas anderem? Hier das betreffende JS-Problemstück:

const observer = new ResizeObserver(entries => {
  entries.forEach(entry => {
    let width = entry.contentRect.width;
    let height = entry.contentRect.height;
    let neu = (height > width) ? "hoch" : "quer";			

    if(neu != ausrichtung) {
      console.log(neu);
      // Problemteil: /////////////////////////////////
      img.classList.remove("hoch", "quer");
      /////////////////////////////////////////////////
      img.classList.add(neu);
      ausrichtung = neu;
    }
  });
});

Es sollen also bei jeder "Lageänderung" (auf Mobilgeräten) erst einmal die Klasse "hoch" und "quer" entfernt und dann, je nach Lage, neu gesetzt werden. Aber damit kommt der Observer offenbar nicht klar. Ich habe, um einen anderen Fehler auszuschließen, das Klassenaustauschen (das ja eigentlich nichts besonderes ist) sicherheitshalber mal mit diesem Script getestet, da friert nichts ein:

figure.addEventListener("click", function() {
  let neu = Math.floor(Math.random() * 2);
  const arr = ["hoch", "quer"];

  if(neu != ausrichtung) {
    console.log(neu);
    img.classList.remove("hoch", "quer");
    img.classList.add(arr[neu]);
    ausrichtung = neu;
  }			
});

Meine Frage war ursprünglich eigentlich eine andere (die folgt, dann hoffentlich in Kürze). Jetzt muss ich mich erst einmal um dieses unvorhergesehene Problem kümmern. Hier liegt das komplette Testscript. Aber Vorsicht! Der Oberserver zittert wie gesagt beim Verschieben ins Hochformat, also keinen Schreck kriegen :-)

https://fsv-optik.de/tests/test_img.html

Vielleicht hat ja jemand eine Idee.

Gute Nacht