This project is basically a modified version of sdecima/javascript-detect-element-resize including these changes:
ResizeObserver
first..css
file.$ npm i --save resize-detector
import resizeDetector from 'resize-detector'
// adding listener
resizeDetector.addListener(elem, callback)
// removing listener
resizeDetector.removeListener(elem, callback)
this
inside callback
function is the element whose size has been changed.
Is polyfill?
No.
Native first
Yes.
Strategy
Scroll-based + Mutation-based.
Pros
Side effects
position: static
will become position: relative
.Is polyfill?
No.
Native first
No.
Strategy
Scroll-based.
Pros
<object>
s.Side effects
position: static
will become position: relative
.Limitations
Is polyfill
Yes.
Native first
Yes.
Fallback Strategy
Use MutationObserver
to observe every mutation in a document. For IE9/10, use Mutation Events instead.
Pros
Limitations
:hover
.Is polyfill
No.
Native first
No.
Strategy
Listen to resize
events via hidden <iframe>
s.
Pros
Dead simple.
Side effects
position: static
will become position: relative
.Limitations
Is polyfill?
Yes.
Native first
Yes.
Fallback Strategy
Long polling through requestAnimationFrame
or setTimeout
.
Pros
Dead simple.
Side effects
Is polyfill?
No.
Native first
No.
Strategy
Either hidden <object>
s or scroll-based.
Pros
Two approaches available (Really, why?) with scroll-based approach being much faster than hidden <object>
s.
Side effects
position: static
will become position: relative
.Limitations