#9919 open bug ()

Opened March 17, 2014 08:18PM UTC

Last modified September 02, 2015 01:26PM UTC

Dialog resizing doesn't work properly if the dialog contains an iframe

Reported by:	Rantanen	Owned by:	Rantanen
Priority:	minor	Milestone:	none
Component:	ui.dialog	Version:	1.10.4
Keywords:		Cc:
Blocked by:		Blocking:

Description

If the dialog contains an iframe, any drag event that happens on top of the iframe won't be received by the main page.

This was originally reported in #7682 and #7650 and fixed in [a7353e7c9ba18e017813195c885115338800e13d]. The fix works for dragging and for resizing dialogs that do not contain iframes. When the dialog size is changed during resize, the iframe inside it changes size but the overlay div won't match the iframe's size.

This results in two problems:

1. When the dialog is made larger and smaller during one resize, the mouse will end up on top of the iframe during the latter phase.

2. When the dialog is made smaller than it was originally, scroll bars appear since the dialog now contains the blocking div which stays the original size. The scroll bars disappear when the blocking div is removed during the _unblockFrames call.

Test case: http://jsbin.com/picaqipi/1/, reproduced at least in Chrome 33

Attachments (0)

Change History (8)

Changed March 17, 2014 08:25PM UTC by scottgonzalez comment:1

owner:	→ Rantanen
status:	new → pending

Do you have a proposal for this other than the expensive operation of changing the size of the div on every move event?

Changed March 18, 2014 05:38AM UTC by Rantanen comment:2

status:	pending → new

No, not really. That's the only solution I've came up with. How big of a performance issue is that in the end though? We're changing the size of the dialog itself already and in most cases I would expect there to be maximum of one iframe inside the dialog which would increase the amount of divs that need resizing from one to two.

https://github.com/jquery/jquery-ui/pull/1214

Well.. other than inserting massively overlarge div inside the dialog and forcing overflow off to hide the inevitable scrollbars. But to me that sounds even worse.

Changed March 18, 2014 05:41AM UTC by Rantanen comment:3

Actually would it be an option to just create a single full-window sized div over the whole page instead of a seperate div over each iframe? Do we still get drag events for the dialog?

Changed March 18, 2014 07:24AM UTC by Rantanen comment:4

Having a single full-window div seems to work as well at least in current browsers and emulated IE7-10.

https://github.com/jquery/jquery-ui/pull/1215

Changed March 18, 2014 12:10PM UTC by scottgonzalez comment:5

Replying to [comment:3 Rantanen]:

Actually would it be an option to just create a single full-window sized div over the whole page instead of a seperate div over each iframe?

Perhaps during resize, but certainly not during drag.

I'm hesitant to implement either of the suggestions since it would mean moving away from a temporary solution in dialog to a permanent solution in dialog. The code that currently exists will go away with the interaction rewrite.

Changed March 18, 2014 01:40PM UTC by Rantanen comment:6

Replying to [comment:5 scott.gonzalez]:

I'm hesitant to implement either of the suggestions since it would mean moving away from a temporary solution in dialog to a permanent solution in dialog. The code that currently exists will go away with the interaction rewrite.

This is okay. We needed this fix for our own application and I've now implemented it there. With the pull requests I just wanted to make sure that we won't lose the fix when updating jQuery in future.

If the issue will be fixed with the interaction rewrite in future, this is fine by me as well. Is there a target for this rewrite?

Changed March 19, 2014 12:17PM UTC by scottgonzalez comment:7

status:	new → open

Replying to [comment:6 Rantanen]: