Resizing elements on page makes scrollreveal behave erratically.

When **resizeable elements** on the page resize then tags with scroll reveal that are below on the page do not reveal properly.
They either reveal too late / too early (depending how the said resizeable elements resized: got smaller or got bigger) or not reveal at all (those tags which are placed on the very bottom of the page).
I was hoping the ScrollReveal().sync() would fix that but no hope.
Similarly destroying and rebuilding the reveals doesn't work. I believe it is a bug introduced recently because I recall it was working with sync() before on some older version.

Bug demonstration:
JSBin
https://jsbin.com/vilajuziji/1/edit?html,css,js,output
I've found JSBin very clunky. I've created same demonstation on codepen as well just in case.
https://codepen.io/RhetoricalDude/pen/KKWByoM

In the demo above you have a big blue resizeable element which gets resized when clicked. When resized you can observe that tags below demonstrate the bug as they reveal too late.
In commented JS part there are 3 unsuccessful attempts to use sync() and destroy() which you can play with to see they only make things worse by making reveal stop working altogether.

**Edit:**
This works as expected in 4.0.5. Calling ScrollReveal().sync() in 4.0.5 properly refreshes all elements controlled by scrollreveal.
Sample with 4.0.5 https://codepen.io/RhetoricalDude/pen/YzZjbwG

### Environment

* Operating System: Windows 10 Pro
* Browser Version: Chrome 91
* ScrollReveal Version: 4.0.9

Start by running the CodePen or JSBin reproduction with ScrollReveal 4.0.9, then compare its behavior with 4.0.5. Trace ScrollReveal().sync() and destroy() around a resized element; done means below-page reveals remain correctly timed and still work after resizing.

Written by the indexing model from the issue text.