Simplebar: Autodetecting content size changes for simplebar recalculation

[jcamilleri13]

🐛 Bug

I'm not sure if this should be considered a bug or a feature request – it depends if this functionality was ever intended or intentionally omitted. I'm listing it as a bug as I think it's an important use-case that can be easily remedied based on my preliminary investigations.

Current Behaviour

In its current iteration, SimpleBar does not accurately detect size changes in the content that is being scrolled. A simple example to recreate can be seen in this previously raised issue: https://github.com/Grsmto/simplebar/issues/278

When a bootstrap collapsible pane is expanded, SimpleBar fails to detect the new height of the inner content and fails to recalculate scrollbars. As a result, the new content is truncated. The following images further illustrate this issue:

In this element, a number of collapsible accordion elements fit without overspilling the container boundaries, thus a scrollbar is not required:

Once the accordions are expanded, however, the content spills out of the frame. No scrollbars appear, so the content is effectively truncated.

Expected Behaviour

SimpleBar should detect the size change and call its recalculate() function to recalculate the scrollbars. This function correctly detects the new size, as manually calling recalculate() from the console correctly brings up the scrollbars.

Suggested solution(s)

A ResizeOberver is already being used to monitor size changes, as in the following code snippet:
https://github.com/Grsmto/simplebar/blob/df94a99dd5d764888ecb50c1f154665321195a33/packages/simplebar/src/simplebar.js#L400-L401

This observer does not correctly monitor the inner content however, as it relies on the browser's computed values for the height which are overridden by SimpleBar's multiple wrapper elements (these being required for correct functionality). As a result, SimpleBar correctly recalculates the scrollbars if the outer/container element is resized, but not if the content changes size.

I suggest that the existing ResizeObserver is also configured to watch the inner content (i.e. the contents of the simplebar-content div, possibly wrapped within another wrapper div as the simplebar-content div has a forced height of 100% or auto). This could easily be attained with an additional call to this.resizeObserver.observe(), with the content element as the element being observed.

Your environment

| Software | Version(s) |
| ---------------- | ---------- |
| SimpleBar | 3.1.4 |
| Browser | Firefox 66.0.1, Chrome 73.0.3683.86 |
| npm/Yarn | npm 5.6.0 |
| Operating System | Microsoft Windows 10 |

[Grsmto]

Hi,
Thanks for your report.
However I'm not sure why you created a new issue whereas you pointed yourself to its own duplicate? Is there a specific reason?
Otherwise I'll close it and leave the original one.

[jcamilleri13]

I wasn't sure if it counted as the same issue since it's also sort of an additional feature, and there wasn't enough information on the previous issue to link it directly to the ResizeObserver. I could add the report to the previous issue and close this if you prefer – it didn't occur to me to add on to the other one, terribly sorry.

[Grsmto]

It's fine, your report is better than the other one so I'll close the other one instead!
Yes this is a bug, this was working fine before, probably introduced in v3.

[jcamilleri13]

Hi again,

Thanks for looking into this so quickly, but I'm afraid it didn't solve the issue.
The MutationObserver has no way to detect resizes, so attaching it to the contentEl does nothing to handle content size changes. The ResizeObserver is what would be required to detect this kind of size change, unless I'm mistaken.

I've looked into the issue and have come up with a suggested fix utilising the existing ResizeObserver. Since the ResizeObserver returns the "css" computed height of an element, attaching it to the _simplebar-content_ element wouldn't work (it is generally set to 100% by the SimpleBar itself). The cleanest solution I've found involves creating a _simplebar-resize-wrapper_ around all the elements within the _simplebar-content_ element and observing that element with the existing ResizeObserver. I'm not a fan of creating additional divs, but I genuinely think it's the only way to correctly detect resizes of the inner content without restructuring the library too heavily. A suggested implementation could take the form of something like this:

this.resizeWrapperEl = document.createElement('div');
this.resizeWrapperEl.classList.add(this.classNames.resizeWrapper);
...
while (this.el.firstChild) this.resizeWrapper.appendChild(this.el.firstChild);

this.contentEl.appendChild(this.resizeWrapper);
this.offsetEl.appendChild(this.contentEl);
...
this.resizeObserver = new ResizeObserver(this.recalculate);
this.resizeObserver.observe(this.el);
this.resizeObserver.observe(this.resizeWrapperEl);

I've done some preliminary testing and this solution seems to work correctly on Firefox and Chrome. If you agree that this is a correct way to proceed I could submit a pull request, perhaps, unless you'd rather implement it yourself.

Thanks for your assistance once again.

[Grsmto]

The problem is that for some cases the size change is not due to a DOM mutation, for example if a div height changes on hover via CSS.
So yeah you're right there is no other way but to use a resize observer.

[Koshux]

+1 to this. Would be great to have it fixed!

[andersk]

Now that we use a ResizeObserver, can we remove the MutationObserver? (resize-observer-polyfill already falls back on MutationObserver if necessary.)

[jcamilleri13]

Well the MutationObserver is checking for different things – addition to the DOM, attribute changes, etc, so it's not being used in the same way the ResizeObserver is. On the other hand, we probably don't need to know about any DOM changes unless the size of the content has changed too, so getting rid of the MutationObserver might not have any negative effects.

[Grsmto]

It's been published in [email protected]! If you wanna test and let me know.
Thanks for your help guys it's been really helpful.

[SvyatoslavZhuravlev]

Hi everyone. I have same problem with angular 9 and angular material expantion panel.
When i epand panel, height of 'simplebar-placeholder' not changing
I'am newbee and dont know how i can fix it(

[seleckis]

I have the same issue, only with React in iframe. Initially scrollbars are not visible and it is not possible to scroll the iframe, but changing size of an iframe triggers simplebar to show correct scrollbars.