Using OverlayScrollbars breaks css transform property in Firefox

[arthur-clq]

Describe the bug
Hi KingSora, first off thank you so much for creating and maintaining this awesome plugin, made my projects look so much more awesome compared to build in scrollbars.

I recently created a parallax scrolling page and applied this plugin to it. It worked fine in Chrome but breaks the css transform property in Firefox. I have tried the vanilla version and also the Vue wrapper and both have the same issue.

My guess is that the added nesting of elements created by OverlayScrollbar somehow broke something in Firefox. Works fine in chromium based browsers (Chrome and Edge).

To Reproduce
https://jsfiddle.net/arthur_clq/er85q36w/12/

Expected Behavior
When scrolling, the background image should scroll slower than the content. However in Firefox, the background is scrolling at the same rate as the contents and even the scale is wrong.

Environment

• Used Operating System(s): Windows 10
• Used Browser(s) (with version): Chrome 89.0.4389.114, Firefox 87.0

[KingSora]

Good day @arthur-clq!

Thats a though issue.. I don't think I can solve it for v1 but I can try with v2 since its possible to get rid of some wrapper elements there.

[KingSora]

v2 released today where this issue should be fixed :)