modal.show() slow forced layout re-flow of large page

[mshvarts]

This line lags the page for like at least 10 seconds because the page contains a long table with many rows and many columns (about a thousand rows)

Here is proof other people had a problem with the code: https://stackoverflow.com/questions/51536468/bootstrap-v4-modalshow-slow-execution

https://github.com/twbs/bootstrap/blob/4c98145482719f5113ca31e389a7be07c5404e13/js/src/util/scrollbar.js#L61C5-L61C44

In any case, it seems setting display to none on the body before setting the overflow to hidden, would fix the issue.
For example:

this._element.style.display = 'none'
this._element.style.overflow = 'hidden'
this._element.style.display= 'block'

Let me know if there is a better way!

BTW, the same problem exists for modal.hide() as well. Related Code Here

[mshvarts]

I put this in my body's onLoad function and it fixed the issue:

const originalShow = bootstrap.Modal.prototype.show;
  bootstrap.Modal.prototype.show = function (...args) {
    jQuery("body").css("display", "none");
    originalShow.apply(this, args);
    jQuery("body").css("display", "block");
  };

[mshvarts]

Has anyone else experienced this thing or seen it happen before? Is this a duplicate issue

[CyrilKrylatov]

Hi,

would you mind to provide us a reduced test case so we can take a look on that?

Thanks!

[mshvarts]

Hi,

would you mind to provide us a reduced test case so we can take a look on that?

Thanks!

Sorry, I have better things to do.

However, In the stack overflow link I shared above, the OP explains how to reproduce this issue

[github-actions]

Hello @mshvarts. Bug reports must include a live demo of the issue. Per our contributing guidelines, please create a reduced test case on CodePen or StackBlitz and report back with your link, Bootstrap version, and specific browser and Operating System details.