Mutation Observer не определяет, изменяется ли размер из-за гибкости или изменения размера элемента-брата.

Question

Я пытаюсь наблюдать элемент по его ширине, используя MutationObserver. Но когда ширина этого элемента изменяется, потому что соседний с ним элемент меняет свой размер. Это остается незамеченным.

Вот jsFiddle http://jsfiddle.net/you8gw7t/5/

var foo = document.querySelector('#foo'),
  oldWidth = foo.style.width,
  observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        if (mutation.target === foo && mutation.attributeName === 'style' &&
          oldWidth !== foo.style.width) { 
          alert('Width Changed!'); 
          oldWidth = foo.style.width;
        }
    });    
  });

// configuration of the observer, just look for attribute changes:
var config = {
  attributes: true, subtree: true, children: true, attributeOldValue: true
};

observer.observe(foo, config);

setTimeout(function () {
   foo.style.width = '150px';
}, 500);