Infinite recalculation loop with tiny div in Firefox

[andersk]

Describe the bug
Putting a SimpleBar on a tiny div under certain circumstances results in an infinite recalculation loop in Firefox.

To Reproduce
Run this jsfiddle in Firefox. It consists of

<div id=outer data-simplebar>
  <div id=inner>
  </div>
</div>

#outer {
  width: 15px;
  height: 10px;
}

#inner {
  border-right: 20px solid blue;
  height: 20px;
}

I see visible flashing as the SimpleBar repeatedly recalculates.

Expected behavior
There’s nothing dynamic here, so SimpleBar should only recalculate once.

Reproducible example
https://jsfiddle.net/anderskaseorg/4be5o91j/

Your environment

Software	Version(s)
SimpleBar	4.0.0
Browser	Firefox 66.0.5
Operating System	Ubuntu 19.04

[Grsmto]

How big do you estimate this issue is? Is there any underlying issue you faced before coming to this specific reduced case?

I know where this comes from but it's tricky to solve. There is a loop at SimpleBar init where the resize observer is triggered by the hideNativeScrollbars() function, as this is moving size.
The resize observer should probably only start listening after initial setup...But this would probably need an overall rework cause that part of the code is especially messy and error prone.
Thing is SimpleBar is just a hack so obviously there is no "good" solution for doing what we are doing.

[andersk]

I came across this while debugging #325. I’m not aware of it showing up in a “real” application, but you know, it’d be nice to be sure it won’t.

[andersk]

The resize observer should probably only start listening after initial setup..

The problem can be triggered after initial setup.