iOS 15 overflow issue for fixed elements when Tab Bar is positioned top

iOS 15 appears to have an issue with overflowing fixed elements when the Tab Bar is positioned at the top instead of the bottom (the new default).

For example, I have a long Bootstrap 5 Modal which has buttons at the bottom so the user scrolls within the modal which hides Safaris UI and then when trying to click the button iOS, instead, forces Safari's UI back into view making the button inaccessible. See the gif example below (appologies for low quality, there's a file size limit)...

In the gif above you can see Safari's UI jumping in and out as I scroll and tap the 'Close' button.

View the example here: https://thelevicole.com/ios-15-overflow-issue/

Example code here: https://github.com/thelevicole/ios-15-overflow-issue/blob/main/index.html

I found a similar issue here: iOS 15 safari toolbar now hides when scrolling within an element which the comments link to an Apple video highlighting the use of CSS env variables so I've tried adding the safe area inset to the top and bottom of the modal...

.modal {
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
}

This does not appear to have any affect.

Please note that my example isn't the only time this issue occurs, I've ran into the same issue on almost every site that has an overflowing fixed element (i.e. cookie preferences etc).

Is there a solution or is this a bug that should be submitted to Apple?