For an unknown reason, probably a theme conflict, when I open my modal, the modal backdrop quickly shows up and then disappears.

<div class="modal fade" id="iframeModal1" tabindex="-1" data-bs-focus="false" aria-labelledby="iframeModal1Label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Use a button element rather than an anchor to avoid href="#" issues -->
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <!-- Modal content -->
      </div>
    </div>
  </div>
</div>

I tried :

• Checking for duplicate Bootstrap includes (or overlapping event bindings) - I didn't find any
• Ensuring modal’s HTML isn’t nested in elements with conflicting positioning styles. I tried to change my .wrapper for 'overflow:visible'. It's not working
• Verifying that my theme isn't inadvertently hiding the backdrop with its own CSS. I can't find the conflict.

EDIT - I found a workaround:

.modal.fade.show {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); /* For Safari */
}