IPhone Keyboard block Bootstrap 5 Bottom Canvas

[odion-cloud]

Prerequisites

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

Describe the issue

I'm working on a project using Bootstrap 5, and I've implemented a bottom canvas (offcanvas) that slides up. However, on iPhones, when the keyboard pops up (e.g., during form input), it blocks the bottom canvas instead of pushing it up or resizing it properly.

I've tried using CSS tweaks like position: fixed; and overflow: auto;, but they didn't solve the issue. Has anyone encountered this problem or found a reliable workaround for iOS?

Any help or suggestions would be greatly appreciated! @ @

Reduced test cases

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.3