Opened 11 years ago

Closed 9 years ago

Last modified 2 months ago

#5245 closed bug (fixed)

Relative width elements break when wrapped for effects.

Reported by: ajpiano Owned by: tomykaira
Priority: major Milestone: 1.9.0
Component: ui.effects.core Version: 1.8rc3
Keywords: slide effect Cc: Corey Frang
Blocked by: Blocking:

Description (last modified by Corey Frang)

As per this forum thread, http://forum.jquery.com/topic/strange-slide-effectf-when-using-relative-width, the "slide" effect is jumpy on contained element.

http://jsfiddle.net/n4vET/3/

Note that the jumpiness is manifested in Firefox, but not in Webkit.

The problem exists in createWrapper, the element is wrapped with a div, who's width is set to that of the element, at that point, the relative width recalculated, and thus the element "shrinks"

It also effects bounce & clip for sure, but potentially others as well.

Change History (12)

comment:1 Changed 11 years ago by Scott González

Milestone: TBD1.next

comment:2 Changed 10 years ago by Corey Frang

comment:3 Changed 9 years ago by Corey Frang

Status: newopen

comment:4 Changed 9 years ago by tomykaira

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

effects.slide: fix: reset width and height on the end of animation, get distance before wrapping. #5245-Slide Effect Broken With Relative Width

Tested with Firefox 4.

comment:5 Changed 9 years ago by Corey Frang

Cc: Corey Frang added
Component: effects.* (individual effect)effects.core
Description: modified (diff)
Summary: Slide Effect Broken With Relative WidthRelative width elements break when wrapped for effects.

comment:6 Changed 9 years ago by tomykaira

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

Effects.core: Storing size and setting in createWrapper for applied to all effects. Fixed #5245 - Relative width elements break when wrapped for effects.

This is discussed in https://github.com/jquery/jquery-ui/pull/314 . Since this size problem is common among effects, I modified createWrapper and made it always store / set element size.

comment:7 Changed 9 years ago by Corey Frang

Owner: set to tomykaira
Status: openassigned

comment:8 Changed 9 years ago by tomykaira

Resolution: fixed
Status: assignedclosed

effects.core: Convert elements height/width to px and restore after animation in all effects. Fixed #5245 - Relative width elements break when wrapped for effects

Changeset: 2c8151848d191ad9ba53c0ee86b14aefe4288f67

comment:9 Changed 9 years ago by Corey Frang

Milestone: 1.next1.9

comment:10 Changed 9 years ago by Corey Frang

#7611 is a duplicate of this ticket.

comment:11 Changed 9 years ago by Corey Frang

#7725 is a duplicate of this ticket.

comment:12 Changed 2 months ago by GitHub <noreply@…>

In 91037d6:

Tests: Accept a small difference of animated width/height

jQuery 3.2 & newer have a different animation logic and the animated elements
width/height differ from the starting ones even at the beginning of the
animation. The point of the assertions checking that they're identical was
to ensure bug #5245 is fixed; that issue manifested by a big jump to half the
element size. To test for that, it's enough to check that the first obtained
values are close to the original ones.

This makes effects tests pass in all supported jQuery versions.

Closes gh-1928
Ref #5245

Note: See TracTickets for help on using tickets.