jQuery UI dialog modals repositions incorrectly on window resize when there is a off canvas rendered

Problem/Motivation

If you have a jQuery UI dialog modal (a dialog having the modal configuration set to TRUE) and a Off canvas rendered at the same time (i.e. the dialog is opened via the Off canvas), the modal is repositioned incorrectly when resizing the window.

Here is an example using Layout Builder and the contrib. module Layout Builder Modal:

(thanks to kevinfunk for providing the GIF in #3074302)

The expected behaviour here would be that the modal keeps being centered on window resize.

You can also reproduce this behaviour in Drupal core:

<a href="/node/add/page" class="use-ajax" data-dialog-options='{"width": 500,"modal": true,"autoResize":true}' data-dialog-type="dialog">Dialog</a>

            <a href="/node" class="use-ajax" data-dialog-renderer="off_canvas" data-dialog-type="dialog">Off canvas</a>

If you only would open the Dialog, it would resize and the position would be as expected. But if you first open the off canvas, and then the dialog the same behaviour as with Layout Builder Modal.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet