Watch element size in Chrome

Question

So Chrome apparently has a bug that observing the size of an element with a MutationObserver doesn't work when the element is manually resized.

What should I use instead or in addition to that to make this work in Chrome, too, until the bug is fixed? Should I use the deprecated mutation events or is there another better alternative?

Is there a way to do this nice in AngularJS without using the element object?

Answer 1

In order to watch an element's size, you have the following options:

• Using a MutationObserver you can watch the element's attributes that change when the element is manually resized. This is a bug in Chrome.

• You can continually poll the element size with JavaScript in a timer interval, but you've indicated that this is not something you wish to use.

• Your last option that I am aware of is to use CSS element queries.

The last option works by using the fact that all browsers support overflow events for elements. It will alter the layout of your existing page, forcing the element that you are rezing to be positioned relatively or absolutely. No problem at all if you've got a simple page with simple css, but more complicated layouts may run into issues.

Answer 2

I ran into a similar issue while making a few responsive elements so I just ended up using window.onresize:

window.onresize = function(){
        //do element changes here
        $scope.$apply();
    };

not sure if that's what you're looking for but this approach worked well for me.