Ticket #5694 (closed bug: fixed)

Opened 4 years ago

Last modified 3 years ago

Invalid reference in UI Resizable hack for Opera

Reported by: jquery-dev Owned by:
Priority: critical Milestone: 1.8.3
Component: ui.resizable Version: 1.8.1
Keywords: Cc:
Blocking: Blocked by:

Description

There is an error in the resizable.alsoResize() method, in a section that is specific to Opera...

$.ui.plugin.add("resizable", "alsoResize", { 
    ... 
    stop: function(event, ui){ 
        var self = $(this).data("resizable"); 

        //Opera fixing relative position 
        if (self._revertToRelativePosition && $.browser.opera) { 
            self._revertToRelativePosition = false; 
            el.css({ position: 'relative' }); 
        }

        $(this).removeData("resizable-alsoresize-start"); 
    }

The reference 'el' does not exist, so Opera bombs out with...

Uncaught exception: ReferenceError: Undefined variable: el
    el.css({ position: 'relative' });

It seems this is because the code in this method was copied from the method above it, where el is defined within a loop:

resize: function(event, ui){
    ...
    _alsoResize = function(exp, c) {
        $(exp).each(function() {
            var el = $(this), ...;
            ...
            //Opera fixing relative position
            if (/relative/.test(el.css('position')) && $.browser.opera) {
                self._revertToRelativePosition = true;
                el.css({ position: 'absolute', top: 'auto', left: 'auto' });
            }

            el.css(style);
        });

In the stop() method, el cannot be assigned to $(this) because that is the outer dialog element and it is the dialog content-element that needs to be reset. So this hack works specifically for the dialog widget...

    var el = $(this).children(".ui-dialog-content");

But obviously this needs to be generic - targeting the same element(s) targeted in the resize method, because that is what it is supposed to 'undo'.

This error also existed in version 1.7.2. It has probably been missed for so long because it occurs only under these conditions:.

  • $.browser.opera = true, and
  • self._revertToRelativePosition = true

The revertToRelativePosition flag is set when the alsoResize target element has position=relative, which Opera temporarily changes to absolute.

Having a resizable element with position:relative is not unusual, and since resizable is used by many other widgets (I discovered it in Dialog), this represents a serious bug in Opera.

Change History

comment:1 Changed 4 years ago by jquery-dev

I resolved the bug above. In addition to fixing this and the other bug I reported ( http://dev.jqueryui.com/ticket/5695), I also found the Opera hack logic incomplete. The previous code would 'reset' an element's position from absolute to relative even if it was originally absolute. Now each element's original position is save in start().

This revised code is a complete fix for all issues. I may also submit this directly to the repository, but am also posting it here to complete this ticket...

$.ui.plugin.add("resizable", "alsoResize", {

	start: function (event, ui) {
		var self = $(this).data("resizable"), o = self.options;

		var _store = function (exp) {
			$(exp).each(function() {
				var el = $(this);
				el.data("resizable-alsoresize", {
					width: parseInt(el.width(), 10), height: parseInt(el.height(), 10),
					left: parseInt(el.css('left'), 10), top: parseInt(el.css('top'), 10),
					position: el.css('position') // to reset Opera on stop()
				});
			});
		};

		if (typeof(o.alsoResize) == 'object' && !o.alsoResize.parentNode) {
			if (o.alsoResize.length) { o.alsoResize = o.alsoResize[0];	_store(o.alsoResize); }
			else { $.each(o.alsoResize, function (exp) { _store(exp); }); }
		}else{
			_store(o.alsoResize);
		}
	},

	resize: function (event, ui) {
		var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

		var delta = {
			height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,
			top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0
		},

		_alsoResize = function (exp, c) {
			$(exp).each(function() {
				var el = $(this), start = $(this).data("resizable-alsoresize"), style = {}, 
					css = c && c.length ? c : el.parents(ui.originalElement[0]).length ? ['width', 'height'] : ['width', 'height', 'top', 'left'];

				$.each(css, function (i, prop) {
					var sum = (start[prop]||0) + (delta[prop]||0);
					if (sum && sum >= 0)
						style[prop] = sum || null;
				});

				// Opera fixing relative position
				if ($.browser.opera && /relative/.test(el.css('position'))) {
					self._revertToRelativePosition = true;
					el.css({ position: 'absolute', top: 'auto', left: 'auto' });
				}

				el.css(style);
			});
		};

		if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) {
			$.each(o.alsoResize, function (exp, c) { _alsoResize(exp, c); });
		}else{
			_alsoResize(o.alsoResize);
		}
	},

	stop: function (event, ui) {
		var self = $(this).data("resizable");

		_reset = function (exp) {
			$(exp).each(function() {
				var el = $(this);
				// reset position for Opera - no need to verify it was changed
				el.css({ position: el.data("resizable-alsoresize").position });
			});
		}

		if (self._revertToRelativePosition) {
			self._revertToRelativePosition = false;
			if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType) {
				$.each(o.alsoResize, function (exp) { _reset(exp); });
			}else{
				_reset(o.alsoResize);
			}
		}

		$(this).removeData("resizable-alsoresize");
	}
});

comment:2 Changed 4 years ago by jquery-dev

comment:3 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed
  • Milestone changed from TBD to 1.9

Fixed in  a78d5ee.

comment:4 Changed 4 years ago by eXtreme

  • Status changed from closed to reopened
  • Resolution fixed deleted

Again, code (to stop function) was copied without checking. Opera returns an error in line:

if (typeof(o.alsoResize) == 'object' && !o.alsoResize.nodeType)

Of course because there is no "o" variable. That "stop" function misses "var o = self.options;"

comment:6 Changed 4 years ago by scott.gonzalez

  • Status changed from reopened to closed
  • Resolution set to fixed

Fixed in  7d24c1a. Thanks eXtreme.

comment:7 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.3

comment:8 Changed 3 years ago by eXtreme

Resizable: Adding missing variable initialization. Fixes #5694 - Invalid reference in UI Resizable hack for Opera.

Changeset: 7d24c1a57ffcfa461dc48f6024b33e548179c491

Note: See TracTickets for help on using tickets.