Skip to main content

Search and Top Navigation

#9166 closed bug (fixed)

Opened March 18, 2013 07:12PM UTC

Closed October 02, 2013 03:02PM UTC

Last modified June 18, 2014 01:12PM UTC

Dialog: moveToTop implementation resets flash/video/iframe/scroll

Reported by: ardoramor Owned by:
Priority: blocker Milestone: 1.11.0
Component: ui.dialog Version: 1.10.2
Keywords: Cc:
Blocked by: Blocking:
Description

When multiple dialogs are open, each containing a flash or video element, and the dialogs are selected so that the other loses focus, UI code moves the newly selected dialog to the top by inserting all other sibling dialogs before the selected dialog. This causes the flash content of the deselected dialog to be reset as it is detached from DOM. The examples can be seen below:

http://jsfiddle.net/FgJKk/ <- JqueryUI v1.9.2, works fine

http://jsfiddle.net/FgJKk/1/ <- JqueryUI v1.10.2, flash elements, breaks

http://jsfiddle.net/FgJKk/2/ <- JqueryUI v1.10.2, video elements, breaks

Attachments (0)
Change History (23)

Changed March 18, 2013 07:42PM UTC by scottgonzalez comment:1

milestone: none1.11.0
priority: minorblocker
status: newopen
summary: UI.Dialog moveToTop implementation resets active flash / video elementsDialog: moveToTop implementation resets flash/video/iframe/scroll

Changed March 18, 2013 07:43PM UTC by scottgonzalez comment:2

#9167 is a duplicate of this ticket.

Changed March 18, 2013 07:44PM UTC by scottgonzalez comment:3

#9063 is a duplicate of this ticket.

Changed March 19, 2013 02:58AM UTC by mpermana comment:4

The fix is to remove the mousedown handler, why is the code doing moveToTop when mouse is down? I think that's wrong. Please remove the code that call moveToTop in jquery-ui.js line 9874:

mousedown: function( event ) {

if ( this._moveToTop( event ) ) {

this._focusTabbable();

// }

}

Changed March 19, 2013 03:21AM UTC by scottgonzalez comment:5

Replying to [comment:4 mpermana]:

The fix is to remove the mousedown handler, why is the code doing moveToTop when mouse is down?

Because clicking on a dialog should bring it in front of other dialogs. That's not the problem. The problem is how moveToTop() is implemented, which changed in 1.10.0.

Changed March 25, 2013 03:24PM UTC by aNt1X comment:6

_comment0: i think that this bug relates to the one i opened in the past \ \ http://bugs.jqueryui.com/ticket/9067 \ \ and signed as "cant fix" \ \ 1364225056809012

i think that this bug relates to the one i opened in the past

http://bugs.jqueryui.com/ticket/9067

and marked as "cant fix"

Changed March 25, 2013 03:38PM UTC by scottgonzalez comment:7

Replying to [comment:6 aNt1X]:

i think that this bug relates to the one i opened in the past

Yes, I've repurposed this ticket to encompass all related tickets. The truth is that we can't fix this and simultaneously avoid z-index hell. We pushed for browser vendors to do the sane thing, but the response we've gotten is that it's too hard. We're going to look into how much z-index annoyance we're willing to live with.

Changed April 04, 2013 09:18AM UTC by tvdeyen comment:8

This is a real blocker for us. But I see also that this is hard to fix, without going back to the old z-index implementation. Hard one :)

Couldn't you at least introduce on option that disables the auto z-index mechanism?

Changed April 04, 2013 12:33PM UTC by scottgonzalez comment:9

No, we will never introduce an option to work around a current bug.

Changed April 04, 2013 12:48PM UTC by aNt1X comment:10

Just to let the users know the workaround i've temporary used:

I have many dialogs, but only one of them contains an iframe, and it is "single instance".

So, I decided to rewrite the _moveToTop() function:

        _moveToTop : function (event, silent) {
            var moved = false;

            // *** WORKAROUND FOR THE FOLLOWING ISSUES ***
            //
            // New stacking feature causing iframe problems when changing active dialog
            // http://bugs.jqueryui.com/ticket/9067
            //
            // Moving an IFRAME within the DOM tree results in reloading of content
            // https://bugs.webkit.org/show_bug.cgi?id=13574

            if (this.uiDialog.nextAll(":visible").length > 0) {
                moved = true;

                if (this.uiDialog.nextAll(":visible").children('iframe').length > 0) {
                    // if one of the next elements contains an iframe, move this dialog after the last child
                    this.uiDialog.insertAfter(this.uiDialog.nextAll(":visible:last"));
                } else {
                    // standard behaviour: move the next elements before this one
                    this.uiDialog.nextAll(":visible").insertBefore(this.uiDialog);
                }
            }

            if (moved && !silent) {
                this._trigger("focus", event);
            }

            return moved;
        }

It's an ugly, ugly, hack: basically I try to not move the iframe's dialog, and move the other ones.

Changed April 12, 2013 01:36PM UTC by scottgonzalez comment:11

#9225 is a duplicate of this ticket.

Changed April 19, 2013 09:45AM UTC by Bk1 comment:12

I'm using jQuery UI to create a windowed desktop. All dialogs with scrolling elements are reset to top when _moveToTop is called. This problem is huge for me (and for my interface)...

At the moment I am trying to reimplement _moveToTop so that it stores the "scrollTop" of all involved scrollable elements and restore the scrollTop position after the dialog divs are swapped. It does not work very well, the code is horrible and it is specific to my case.

Honestly I don't know how to solve the problem in a clean way. I just stepped in to let know how important it is to find a solution. Thanks!

Changed June 14, 2013 07:05AM UTC by jzaefferer comment:13

We discussed this in Portland. Scott was open to going back to some, hopefully limited, z-index shuffling. I don't remember the details though.

Changed July 10, 2013 08:46AM UTC by cRz comment:14

_comment0: The following script solves the problem..: \ \ {{{ \ _moveToTop: function( event, silent ) { \ var $parent = this.uiDialog.parent(); \ var $elementsOnSameLevel = $parent.children(); \ \ var heighestZIndex = 0; \ $.each($elementsOnSameLevel, function(index, element) { \ var zIndexOfElement = $(element).css('z-index'); \ if (zIndexOfElement) { \ var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0; \ if (zIndexOfElementAsNumber > heighestZIndex) { \ heighestZIndex = zIndexOfElementAsNumber; \ } \ } \ }); \ var currentZIndex = this.uiDialog.css('z-index'); \ \ var moved; \ if (currentZIndex >= heighestZIndex) { \ moved = false; \ } else { \ this.uiDialog.css('z-index', heighestZIndex + 1); \ moved = true; \ } \ \ if ( moved && !silent ) { \ this._trigger( "focus", event ); \ } \ \ return moved; \ }, \ }}} \ 1373446472753001

The following part solves the problem..:

_moveToTop: function( event, silent ) {
	var $parent = this.uiDialog.parent();
	var $elementsOnSameLevel = $parent.children();
	
	var heighestZIndex = 0;
	$.each($elementsOnSameLevel, function(index, element) {
		var zIndexOfElement = $(element).css('z-index');
		if (zIndexOfElement) {
			var zIndexOfElementAsNumber = parseInt(zIndexOfElement) || 0;
			if (zIndexOfElementAsNumber > heighestZIndex) {
				heighestZIndex = zIndexOfElementAsNumber;
			}
		}
	});
	var currentZIndex = this.uiDialog.css('z-index');
	
	var moved;
	if (currentZIndex >= heighestZIndex) {
		moved = false;
	} else {
		this.uiDialog.css('z-index', heighestZIndex + 1);
		moved = true;
	}
	
	if ( moved && !silent ) {
		this._trigger( "focus", event );
	}
	
	return moved;
},

Changed September 11, 2013 08:20PM UTC by jzaefferer comment:15

Based on the comment from Bk1, apart from stacking, we also need to test scroll behaviour. I don't think we ever tested what happens when we move a dialog that has scrollable content.

Changed September 27, 2013 04:06PM UTC by jzaefferer comment:16

After discussing that with Scott a while ago, there's a few things to do here:

  • Add unit tests for/against iframe and scroll reset.
  • If element isn't in front, look for. ui-front siblings, find highest z-index, increment by one, set to element.
  • Verify result with visual tests.

I still intend to work on this.

Changed September 30, 2013 09:29AM UTC by jzaefferer comment:17

#9067 is a duplicate of this ticket.

Changed October 02, 2013 03:02PM UTC by Jörn Zaefferer comment:18

resolution: → fixed
status: openclosed

Dialog: Switch back to shuffling z-index, but only look at .ui-front siblings.

Fixes #9166 - Dialog: moveToTop implementation resets flash/video/iframe/scroll

Fixes #9364 - Dialog: Click of element with tooltip scrolls the dialog to the top

Changeset: e263ebda99f3d414bae91a4a47e74a37ff93ba9c

Changed October 14, 2013 03:23PM UTC by tvdeyen comment:19

Great, thanks!

Changed October 23, 2013 01:04PM UTC by tj.vantoll comment:20

#9615 is a duplicate of this ticket.

Changed December 09, 2013 01:24PM UTC by tj.vantoll comment:21

#9698 is a duplicate of this ticket.

Changed January 03, 2014 01:31PM UTC by tj.vantoll comment:22

#9725 is a duplicate of this ticket.

Changed June 18, 2014 01:12PM UTC by tj.vantoll comment:23

#10116 is a duplicate of this ticket.