BUG Resize infinite loops in IE8 (fixes #575)

IE8 gets a bit confused and fires resize events
when element dimensions in the DOM are changed
as a result of a resize event, causing an infinite loop.
Apart from artificially throttling the event, the only solution
I've found is to check for actual window dimension changes.
http://stackoverflow.com/questions/12366315/window-resize-event-continually-fires-in-ie7?lq=1

This implicitly fixes an issue where TreeDropdownField panel isn't
accessible in the "Insert Media" popup, because the resize event happes
to be triggered by the popup overlay, and in effect closes the drop down
panel right after opening it.

Relating to the jQuery UI component, there's a host of issues and discussions around this, but no solution…
http://bugs.jquery.com/ticket/4097
http://bugs.jqueryui.com/ticket/4758
http://bugs.jqueryui.com/ticket/4065
http://bugs.jqueryui.com/ticket/7514
http://bugs.jqueryui.com/ticket/8881
https://groups.google.com/forum/?fromgroups#!topic/jquery-ui/fDSvwAKL6Go
http://www.mail-archive.com/jquery-ui@googlegroups.com/msg04839.html
This commit is contained in:
Ingo Schommer 2013-06-13 17:31:28 +02:00
parent 71a5615213
commit 3b40711b98
2 changed files with 39 additions and 3 deletions

View File

@ -4,6 +4,25 @@ jQuery.noConflict();
* File: LeftAndMain.js
*/
(function($) {
var windowWidth, windowHeight;
$(window).bind('resize.leftandmain', function(e) {
// Entwine's 'fromWindow::onresize' does not trigger on IE8. Use synthetic event.
var cb = function() {$('.cms-container').trigger('windowresize');};
// Workaround to avoid IE8 infinite loops when elements are resized as a result of this event
if($.browser.msie && parseInt($.browser.version, 10) < 9) {
var newWindowWidth = $(window).width(), newWindowHeight = $(window).height();
if(newWindowWidth != windowWidth || newWindowHeight != windowHeight) {
windowWidth = newWindowWidth;
windowHeight = newWindowHeight;
cb();
}
} else {
cb();
}
});
// setup jquery.entwine
$.entwine.warningLevel = $.entwine.WARN_LEVEL_BESTPRACTISE;
$.entwine('ss', function($) {
@ -133,7 +152,10 @@ jQuery.noConflict();
fromWindow: {
onstatechange: function(){ this.handleStateChange(); },
onresize: function(){ this.redraw(); }
},
'onwindowresize': function() {
this.redraw();
},
'from .cms-panel': {

View File

@ -4,8 +4,22 @@
* On resize of any close the open treedropdownfields
* as we'll need to redo with widths
*/
$(window).resize(function() {
$('.TreeDropdownField').closePanel();
var windowWidth, windowHeight;
$(window).bind('resize.treedropdownfield', function() {
// Entwine's 'fromWindow::onresize' does not trigger on IE8. Use synthetic event.
var cb = function() {$('.TreeDropdownField').closePanel();};
// Workaround to avoid IE8 infinite loops when elements are resized as a result of this event
if($.browser.msie && parseInt($.browser.version, 10) < 9) {
var newWindowWidth = $(window).width(), newWindowHeight = $(window).height();
if(newWindowWidth != windowWidth || newWindowHeight != windowHeight) {
windowWidth = newWindowWidth;
windowHeight = newWindowHeight;
cb();
}
} else {
cb();
}
});
var strings = {