Bootstrap 5.2.0-beta1 scrollable Modal's Footer buttons not accessible on Safari 15.5

I have a Modal that has enough content that it requires scrolling in order to see the Cancel (and Save) buttons in the modal-footer.

If I use Safari 15.5 on macOS 12.4, the modals are displayed correctly; however, when I scroll to the modal-footer then click on either the Cancel or Save buttons, the click on the buttons is not accepted and the modal scrolls back to the top.

The problem is entirely due to the need to scroll. If the modal-body can be displayed without scrolling, the buttons in the modal-footer work fine.

On Chrome 103 and Firefox 102 on the same machine, the problem does not occur.

This HTML will reproduce the issue on Safari 15.5…

<div
	class="modal fade show"
	id="workshopModal"
	aria-labelledby="workshopModalTitle"
	style="display: block; padding-left: 0px"
	aria-modal="true"
	role="dialog"
>
	<div class="modal-dialog modal-lg">
		<div class="modal-content">
			<div class="modal-header">
				<h5 class="modal-title" id="workshopModalTitle">Modal Title</h5>
				<button
					type="button"
					data-bs-dismiss="modal"
					class="btn-close"
					aria-label="Close"
				></button>
			</div>
			<div class="modal-body" style="min-height: 80rem">Whatever</div>
			<div class="modal-footer">
				<button data-bs-dismiss="modal" type="button" class="btn btn-secondary">
					Cancel
				</button>
			</div>
		</div>
	</div>
</div>

[nstuyvesant]

I can’t recreate it in CodePen for some reason yet it’s 100% reproducible in my SveteKit project both using vite as the dev server and in production builds. Very frustrating.

[nstuyvesant]

Let me work up a more detailed CodePen using 5.2.0-beta1 as that’s what I’m using. I added an event handler to set focus on an input when the dialog has been shown. When I removed that, I did not get the behavior with the buttons in the modal-footer. Let me see if I can make a more detailed example. Perhaps I left something important out.