Freezing on Window Resize/Maximize

[bartoleo]

Prerequisites

• [X] I have searched for duplicate or closed issues
• [X] I have validated any HTML to avoid common problems

Describe the issue

I am having a problem when the user resizes or maximizes the window, IE freezes for several seconds. The same thing happens to me also in the test page: https://coliff.github.io/bootstrap-ie11/tests/

What version of Bootstrap are you using?

v5.3.2

[coliff]

I can reproduce this issue (with Edge running in IE mode on Windows 11) which I think is an unfortunate side effect from using the ie11CustomProperties polyfill.

You could consider not using that polyfill and instead using standard CSS for Internet Explorer. For example set:

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
}

so that the polyfill doesn't need to calculate everything from:

body {
  font-family: var(--bs-body-font-family);
  font-size: var(--bs-body-font-size);
  font-weight: var(--bs-body-font-weight);
  line-height: var(--bs-body-line-height);
  color: var(--bs-body-color);
  background-color: var(--bs-body-bg);
}

You could try using: https://css-variables.github.io/ to help you achieve this. Paste in the CSS from: https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css and copy across what you need.

[bartoleo]

Thanks for the help and the quick reply.

I try to change the redraw management in ie11CustomProperties when the 'media' changes. It seems to me that it fires several times when you do resize/maximize. https://github.com/nuxodin/ie11CustomProperties/blob/master/ie11CustomProperties.js#L231

Removing it and replacing it with a single redraw on the "resize" event reduces the times and I don't see any problems on the video.

I am still considering the possibility of removing/reducing variables from bootstrap classes, as another possible way.