Search and Top Navigation
#6641 open bug ()
Opened November 09, 2010 03:27PM UTC
Last modified October 26, 2012 01:30AM UTC
Resizable: margin:auto bug in FF, Opera, IE
| Reported by: | raavo | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 2.0.0 |
| Component: | ui.resizable | Version: | 1.8.6 |
| Keywords: | resizable margin auto firefox mozilla opera haspatch | Cc: | |
| Blocked by: | Blocking: |
Description
SUBJECT: Centered element with auto margins.
PROBLEM: Broken left/top position while being resized.
RESULT: Resizable element appears to be jumpy.
CAUSE: This is caused by bugfix no 1749 and it's incompatibility with auto margins.
AFFECTED BROWSERS: FF, Opera, IE
EXAMPLE:
http://editor.24hravi.net/bug.htm
<div style="position:absolute;left:1px;right:1px;margin:auto;width:50%;height:50%"></div>
Initial margin-left from style: auto;
Initial left position from style: 1px;
Computed margin-left from browser: 0px;
Computed left position from browser: 1px+25%;
RESIZABLE 1.8.6:
_mouseStart: function(event) {
var o = this.options, iniPos = this.element.position(), el = this.element;
this.resizing = true;
this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };
// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
el.css({ position: 'absolute', top: iniPos.top, left: iniPos.left });
}
SUGGESTED FIX:
_mouseStart: function(event) {
var o = this.options, el = this.element;
this.resizing = true;
this.documentScroll = { top: $(document).scrollTop(), left: $(document).scrollLeft() };
// bugfix for http://dev.jquery.com/ticket/1749
if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
el.css({ position: 'absolute', top: el.css('top'), left: el.css('left') });
}
ADDITIONAL:
Browser info about "auto" margins: http://www.3d3r.com/simon/marginAutoComputedValue/
Attachments (0)
Change History (4)
Changed November 09, 2010 03:59PM UTC by comment:1
Changed November 09, 2010 04:05PM UTC by comment:2
PROBLEM EXAMPLE IN JSFIDDLE:
Changed October 11, 2012 09:07PM UTC by comment:3
| milestone: | TBD → 2.0.0 |
|---|
Changed October 26, 2012 01:30AM UTC by comment:4
| keywords: | resizable margin auto firefox mozilla opera → resizable margin auto firefox mozilla opera haspatch |
|---|---|
| status: | new → open |
| summary: | Resizable margin:auto bug in FF, Opera, IE → Resizable: margin:auto bug in FF, Opera, IE |
Cannot find where I can edit this ticket. Wanted to edit the fix :) Guess I'll have to leave it to you guys.