I have a chat application which appends messages to the bottom, and when a limit is reached, it removes the oldest message. So it adds and removes a message at the same time. I'm using the ResizeObserver to detect changes in the chat area.

Hue.chat_resize_observer = new ResizeObserver(function () {
  Hue.goto_bottom()
})

Hue.chat_resize_observer.observe(Hue.el("#chat_area"))
Hue.chat_resize_observer.observe(Hue.el("#chat_area_parent"))

The issue I'm having is that the observer simply doesn't get triggered on some messages, and my guess is because the message being inserted is the same height as the message that got removed. How could I get around this? Or maybe I could use another observer? I use the ResizeObserver because it takes into account all height changes, for instance on message added/removed or message height change. I'm thinking I could pair it with the MutationObserver or use setTimeout's but those doesn't seem like ideal solutions.