Modal shifts to the left on fadeout when scrollbar present

[FStolte]

When the fade animation for the Modal is used, the fadeout only happens after some of the modal markup, like the modal-backdrop, has already been hidden again. When the current page has a scrollbar, this causes the modal to slightly move to the left during the fadeout, since the scrollbar also reappears before the animation finishes.

Expected behavior Ideally, the modal markup should only be hidden after the fadeout animation completes, which would also solve this problem. In any case, the modal should not move horizontally during the fadeout.

Additional context

• Blazorise version 1.0.1
• Server-side Blazor

[stsrki]

Any chance you could create a project to reproduce it?

[FStolte]

Actually I just noticed a difference in behavior in our projects vs. the Blazorise Demo page: In our projects, the scrollbar of the page disappears when a modal ist opened and is replaced by a padding on the main div. On the demo page, the scrollbar just remains in place, which is why this bug cannot be observed there. I don't know what causes this difference, so I'm having trouble to reproduce it on the demo page.

Nevertheless, a different version of the same bug can easily be reproduced: Go to the modals page on the Blazorise Demo, open a modal, then reduce the browser window size so that the modal itself gets a scrollbar. Then, when closing the modal, the dialog shifts to the right during the animation.

[ledpup]

I'm getting something very similar to this with my modals. I've been meaning to create an issue. It relates to the scrollbar (it doesn't happen if there is no scrollbar) but I've been having difficultly reproducing it in isolation.

https://github.com/ledpup/ClimateExplorer/issues/300

Below is a screenshot. It shifts everything over to the left a little bit. It's the div tag with the classes "modal fade show" that is doing it.