Отслеживаем ресайзинг элемента без setTimeout и фреймов

[alexwerser]

А что мешает привязать отслеживание размеров элемента к тем действиям, которые приводят к изменению его размеров? С window понятно, там действия внешние, но элементы сами по себе не меняются в размере.

[XAHTEP26]

В статье речь как раз и идет о том, чтобы отслеживать действия которые приводят к изменению размеров элемента.
Тут приводится лишь 2 дополнительных способа. Если вы точно знаете когда размеры элемента могут измениться, то вы можете отслеживать это другим способом.
Например если вы делаете плагин слайдера, то можно проверять высоту при переключении слайдов.
Но если пользователь вашего плагина поместит на слайд какой-нибудь опрос, в котором при нажатии на кнопку будут раскрываться результаты (и соответственно изменяться высота контента), то ему надо будет еще раз вручную инициировать пересчет высоты слайдера.

[RubaXa]

Ещё надо было упомянуть про ResizeObserver (скоро появится, а пока полифилы)

[XAHTEP26]

Про ResizeObserver не знал. Спасибо — добавлю.

Бегло просмотрел полифиллы. Один из них работает по принципу добавления фрейма, а все остальные через setTimeout или requestAnimationFrame (для которого, кстати, тоже подключается полифилл с setTimeout).

Значит будем ждать ResizeObserver, хотя врядли он появится скоро, так как находится в стадии Editors Draft.

И еще в ResizeObserver есть одно «но» — сейчас в спецификации есть такая строчка:

observations will not be triggered by CSS transforms

[RubaXa]

Ну, посмотрим, что будет к релизу, а так, уже давно есть https://github.com/wnr/element-resize-detector

[postrel]

DOMSubtreeModified числится как deprecated
https://www.w3.org/TR/DOM-Level-3-Events/#event-type-DOMSubtreeModified

[XAHTEP26]

Верно. Но поддерживается уже давно и для старых браузеров самое то.
А для новых можно использовать MutationObserver, о котором я решил написать отдельную небольшую статью.

[papikus]

Добавил в ваш пример textarea с возможностью изменения размеров. Работает, но с сильными рывками. Похоже, виноват transition-duration: 1ms;