modal scale and position is affected by pinch-to-zoom on iOS

[ARodsIsland2]

Prerequisites

• [x] I have searched for duplicate or closed issues
• [x] I have validated any HTML to avoid common problems
• [x] I have read the contributing guidelines

Describe the issue

Modal size and position seems to scale inappropriately when the user pinch-zooms on an iOS device.

I did see your note in the Modals and Dropdowns on Mobile section of the Browsers and Devices page:

Page zooming inevitably presents rendering artifacts in some components, both in Bootstrap and the rest of the web. Depending on the issue, we may be able to fix it (search first and then open an issue if need be). However, we tend to ignore these as they often have no direct solution other than hacky workarounds.

This may be one of the "rendering artifacts" you meant, but I suspect not.

Reduced test cases

This can be observed directly in the live demo on the Bootstrap Modal page.

Here's a recording of me doing that. https://youtube.com/shorts/5doz5L4y1R4

Note in the video it seems to affect the navbar as well. ¯_(ツ)_/¯

What operating system(s) are you seeing the problem on?

iOS

What browser(s) are you seeing the problem on?

Safari

What version of Bootstrap are you using?

v5.2

[laojie9]

.modal .modal-dialog {
    position: absolute;
    width: 100%;
}

It works for me but I don't know why

[pmichaeljones]

Same issue here. Have you been able to find a fix? I've tried everything, even the solution that @laojie9 proposed but I'm still not getting anything worthwhile.

[ARodsIsland2]

OK @pmichaeljones, looking at the fix that ended up working for me, it was also specifying a minimum width using 100vw and bootstrap's own width and modal margin values.

.modal-dialog {
    ...
    min-width: min(var(--bs-modal-width), calc(100vw - (var(--bs-modal-margin) * 2)));
    ...
}

This is hacky--as I note in my checkin comment: "Made sure the minimum width of our bootstrap dialogs ends up being no less than the lesser of bootstrap's pixel-width modal variable, or the full width of the screen as defined by vw (less the defined margin of course). This is a hacky workaround for a larger bug in the way Bootstrap handles pinch-to-zoom."

[pmichaeljones]

This was what we ended up using. About the same:

@media (max-width: 768px) {
  .modal-dialog {
    margin: 1rem;
    max-width: calc(100vw - 2rem);
    width: calc(100vw - 2rem);
  }

  .modal-content {
    border-radius: 0.5rem;
    max-height: calc(100vh - 2rem);
  }

  .modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
}