Unexpected margin and padding on bootstrap modal show with sticky-top class

Question

When I open a bootstrap modal, I get unexpected side padding or side margin on some html tags.

One example:

Before showing the modal:

<div id="fixedMenu" class="d-none container-fluid menu sticky-top px-0" style="">
    ...
</div>

After showing the modal:

<div id="fixedMenu" class="d-none container-fluid menu sticky-top px-0" style="padding-right: 15px; margin-right: -15px;">
    ...
</div>

padding-right: 15px; margin-right: -15px; appeared in style property.

Another example:

Before showing the modal:

<form class="sticky-top sticky-top-filters" id="filters" style="">
    ...
</form>

After model show:

<form class="sticky-top sticky-top-filters" id="filters" style="padding-right: 39px; margin-right: -15px;">
    ...
</form>

padding-right: 39px; margin-right: -15px; appeared in style property.

What could explain such behavior from a bootstrap modal?

UPDATE

I just figured out that class sticky-top was causing the issue, when I remove it, problem desapears. (But I need this class)

Answer 1

I got an anwser from this post:

https://github.com/twbs/bootstrap/issues/27071

First, catch modal events to apply style:

$('body').on('show.bs.modal', function () {
    $('.sticky-top').addClass("fixModal");
});
$('body').on('hidden.bs.modal', function () {
    $('.sticky-top').removeClass("fixModal");
});

Second add new classes in style:

.fixModal {
  padding-right: 0 !important;
  margin-right: 0 !important;
}