animate() issue when mixing percentages and pixels in WebKit

[[email protected]…]

[ 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).

[dmethvin]

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

​http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-OverrideAndComputed

​http://www.w3.org/TR/1998/REC-CSS2-19980512/cascade.html#computed-value

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.

[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.

[gnarf]

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

[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.

[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.

[Fred-s]

I've found a workaround:

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

[mikesherov]

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.

[mikesherov]

#10521 is a duplicate of this ticket.

[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.

[mikesherov]

​https://github.com/jquery/jquery/pull/825

[Mike Sherov]

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

Changeset: 0b352f6cb58a1ece3f5d1fb978cdb40bd5b0e854

[mikesherov]

#11932 is a duplicate of this ticket.

[mikesherov]

#11954 is a duplicate of this ticket.