#5245 closed bug (fixed)

Opened March 01, 2010 10:16PM UTC

Closed June 10, 2011 01:40AM UTC

Last modified July 23, 2020 01:57PM UTC

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: gnarf
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (12)

Changed March 02, 2010 02:35AM UTC by scottgonzalez comment:1

milestone: TBD → 1.next

Changed March 07, 2011 04:00AM UTC by gnarf comment:2

Working Fiddle Test: http://jsfiddle.net/gnarf/FXtVP/1/

Changed March 28, 2011 05:10PM UTC by gnarf comment:3

status: new → open

Changed May 19, 2011 05:22PM UTC by tomykaira comment:4

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.

Changed May 22, 2011 07:27AM UTC by gnarf comment:5

cc: → gnarf
component: effects.* (individual effect) → effects.core
description: 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. → 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.
summary: Slide Effect Broken With Relative Width → Relative width elements break when wrapped for effects.

Changed May 22, 2011 01:14PM UTC by tomykaira comment:6

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.

Changed May 22, 2011 08:04PM UTC by gnarf comment:7

owner: → tomykaira
status: open → assigned

Changed June 10, 2011 01:40AM UTC by tomykaira comment:8

resolution: → fixed
status: assigned → closed

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

Changed June 10, 2011 10:08PM UTC by gnarf comment:9

milestone: 1.next → 1.9

Changed August 05, 2011 07:32PM UTC by gnarf comment:10

#7611 is a duplicate of this ticket.

Changed September 17, 2011 07:48AM UTC by gnarf comment:11

#7725 is a duplicate of this ticket.

Changed July 23, 2020 01:57PM UTC by GitHub <noreply@github.com> comment:12

In [changeset:"91037d66b0ea8dd7db0b6083721d0d1b2106cd16" 91037d6]:

#!CommitTicketReference repository="" revision="91037d66b0ea8dd7db0b6083721d0d1b2106cd16"
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