UI Dialog inside non-visible iFrame opens alternatingly with width=0

[sosherof]

It appears if you open a dialog on a page that's inside a now-visble iFrame, where the iFrame wasn't initially visible (display: none or a parent with display: none), the width of the dialog box will alternatingly be set to zero regardless of the width or minWidth options. To be clear, the first time the dialog is opened, the width is correct. If the dialog is closed (e.g. $(this).dialog("close")) and then re-opened (e.g. $(this).dialog("open")), the width will be set to zero. If it's closed/re-opened again, it's correct. And again, it's zero. Etc. In my case, the dialog is modal: true and resizable: false. I've test other configurations but I don't necessarily have access to the code used on the page inside the iFrame.

I dug through the widgets/dialog,js code a bit and I can't seem to find the culprit, except maybe _blockFrames, which sets the width based on the width of iFrames inside the dialog's HTML (my subpage has a couple but they're always display:none so not sure why this hasn't cropped up until now AND I've tried removing them but that didn't help). _blockFrames is called by _makeDraggable and _makeResizeable. Both of those options are false in my configuration so they shouldn't be getting called.

The workaround so far is to force the iFrame to reload once it's visible.

_{EDIT by @mgol: Fixed code formatting}

[mgol]

Thanks for the report. Does the issue you describe exist when jQuery UI 1.12.1 is used or only with jQuery UI 1.13.0 or newer?

[sosherof]

I'll test for that. Standby.

[sosherof]

Problem occurs in 1.12.1 as well.

[mgol]

Thanks for the info. Since the issue is already in 1.12, given limited team resources it's not likely to be fixed by the UI team; see the project status at https://blog.jqueryui.com/2021/10/jquery-maintainers-update-and-transition-jquery-ui-as-part-of-overall-modernization-efforts/. PRs are welcome if they're not too complex.

[ssigwart]

I came across a similar issue. I submitted jquery/jquery#5317, which solves that and hopefully this issue too. The problem is that it if jQuery's computeStyleTests function is called while the window isn't visible, it decides the wrong workarounds to use.

[mgol]

The fix from @ssigwart has been merged in jquery/jquery#5317 and will be included in jQuery 3.7.2.

If you want to double-check if the fix is complete, I encourage checking locally with https://releases.jquery.com/git/jquery-3.x-git.js; this is the development version of the 3.x jQuery line.