Bug Tracker

Opened 6 years ago

Closed 5 years ago

Last modified 5 years ago

#9505 closed bug (fixed)

animate() issue when mixing percentages and pixels in WebKit

Reported by: robert.klep@… Owned by: mikesherov
Priority: low Milestone: 1.8
Component: effects Version: 1.6.1
Keywords: Cc: paul.irish
Blocked by: Blocking:


[ testcase at http://jsfiddle.net/AdrwK/1/ (watch console output) ]

When performing animation on an element which is positioned by percentage with CSS, running an animation on it using a pixel value causes problems.

fx.start is set to the percentual value (for instance '-10' when the element is positioned '-10%'), but fx.unit is px. So fx.start is interpreted as being a pixel value instead of a percentage, which causes jumps.

Issue seems to be related to WebKit (tested on Chrome 11.0.696.71 and Safari 5.0.5-6533.21.1), FF 4.0.1 and Opera 11.11 aren't affected (fx.start contains a pixel value as well).

Change History (14)

comment:1 Changed 6 years ago by dmethvin

Cc: paul.irish added
Status: newopen

jQuery.fx.cur() is getting -3% back from DOM .getComputedStyle, it really should be getting pixels shouldn't it?



The spec is using the dreaded passive voice so it isn't totally clear who is supposed to do the translation from percent to pixels. But I think this is a Webkit bug.

comment:2 Changed 6 years ago by timmywil

Component: unfiledeffects
Priority: undecidedlow

comment:3 Changed 5 years ago by anonymous

I seem to get this issue in jQuery 1.6.4, too. It animates smoothly if only one unit is used throughout. If the element is positioned with percent and animated by pixels it appears to jump to zero before moving to the final location.

comment:4 Changed 5 years ago by gnarf

I agree that this is a webkit issue. getComputedStyle should only return px values - right?

comment:5 Changed 5 years ago by mikesherov

@gnarf, not really a webkit issue, more of a spec issue. getComputedStyle uses resolved value, which is defined by CSSOM, which says for top/left/right/bottom it should use computed value, which is same as cascaded value, which would be a percent in this case.

I've been petitioning both the CSSOM editor and webkit to make this change. So, although technically this is according to spec, it doesn't make sense. To make matters worse, dean Edwards awesome hack is faulty for top/left/right/bottom as we'd need to measure parent size, which is a Russian nesting doll approach and potentially super slow.

comment:6 Changed 5 years ago by mikesherov

Just for history here: http://dev.w3.org/csswg/cssom/#resolved-values

"computed value" changed meaning between CSS spec revisions after getComputedStyle was in use. So although CSS2.1 says getComputedStyle returns "computed value", it's not the same as what CSS2.1 defines as computed value. Ugh, right? CSSOM then chose to define "resolved value" as what getComputedStyle should return, which *sort of* has the rules outlined by "resolved value", with about 20 or so edge cases and deviations in browsers. Ugh. Double ugh.

I have a whole list of bugs filed with w3c and the browsers to attack this issue, but for now, we should be saying, don't use percentages in top/left/bottom/right animations.

comment:7 Changed 5 years ago by Fred-s

I've found a workaround:

overwrite the css value "top" and "left" with the values given by position() before first animate().

comment:8 Changed 5 years ago by mikesherov

Milestone: 1.next1.8
Owner: set to mikesherov
Status: openassigned

to reiterate, this is our issue to fix. getComputedStyle is one of the most divergent APIs out there, and the spec does little to help. I'll have a patch shortly.

comment:9 Changed 5 years ago by mikesherov

#10521 is a duplicate of this ticket.

comment:10 Changed 5 years ago by mikesherov

Fred-s, I'm going to go with your approach here. It's a fairly good workaround. Still won't get us 100% there for bottom and right, at least it'll gets us to a good spot for top and left.

comment:12 Changed 5 years ago by Mike Sherov

Resolution: fixed
Status: assignedclosed

Fix #9505, percentage position values in Webkit, closes gh-825.

Changeset: 0b352f6cb58a1ece3f5d1fb978cdb40bd5b0e854

comment:13 Changed 5 years ago by mikesherov

#11932 is a duplicate of this ticket.

comment:14 Changed 5 years ago by mikesherov

#11954 is a duplicate of this ticket.

Note: See TracTickets for help on using tickets.