Reload Css

[MyNameTony1000]

Hello, I have a strange problem when using the plugin.
I use webpack with es6 and type='module'.
When using the offcanvas bootstrap 5 component and initializing your plugin on the body element - when the offcanvas window appears, the css is updated or something like that, because of this, the smoothness of the offcanvas appearance completely disappears, the animations on the page also reload and start working from the beginning. The page itself does not reload. When disabling the OverlayScrollbars plugin, everything works fine.

This is the connection:

import { OverlayScrollbars } from 'overlayscrollbars';

This usage:

let os = OverlayScrollbars(
  {
    target: document.body,
  },
  {
    overflow: { x: 'hidden' },
    showNativeOverlaidScrollbars: true,
    scrollbars: {
      visibility: 'auto',
      autoHide: 'scroll',
      autoHideDelay: 300,
    },
  }
);

There is also a point - if you use the change of scrolling options during the events of the appearance/disappearance of the offcanvas window, for example:

$('.offcanvas').on('show.bs.offcanvas', function () {
  os.options({
    overflow: { x: 'hidden', y: 'hidden' },
  });
})

The css update will only occur when you first open it, then everything will work fine. Also, when building a project - this problem is not observed in the final files. This problem only occurs when developing a project.

In the old build without type="module" everything works fine.

[KingSora]

Good day @MyNameTony1000 :)

Thats a strange issue indeed... is it possible for you to create a minimal demo for me on StackBlitz? For such an issue I need to have an example so I can make sure I'm not making a mistake when trying to reproduce it. Please also share your OS and browser with me, so I can investigate whether those factors also play a role.

[MyNameTony1000]

While I was trying to make a demo, I found what was causing the problem, it turned out that I have a block whose borders extend beyond the browser viewing area, which is why the described behavior appears.
If you fix this, everything works fine. Plugin version 2.9.1.
But in the old build with version 2.4.5 with the same files, there is no problem, or rather, there is no reaction to the fact that the block extends beyond the viewing area. If you are still interested in watching/checking this, I can put together a minimal demo, but I can only place the files after “build” since I could not place the assembly with the sources on StackBlitz.

[KingSora]

Yes please, I would like to take a look and check why this behavior happens

[MyNameTony1000]

https://stackblitz.com/edit/testovsb

The problem is in the ".advantages-elements" block, a block with text at the bottom of the page, if its "--bs-gutter-x" property is set to "0", everything will be fine. It is better to change in the app.css file itself.
The animated element was left so that it was clear that the animation was going astray, and the offcanvas window appeared abruptly.

Elements leaving the viewport are bad; in any case, they need to be corrected, so during normal development they should not encounter such a problem.

[MyNameTony1000]

Hello, should I close this discussion?