Bug 85179 – Animation of background position wobbles

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[DavidUnderhill]

This example should demonstrate the problem: http://jsfiddle.net/SzcQn/

On mouseover the sequence will play, on mouseout it will play in reverse, that is from right to left of the sprite sheet image.


In Firefox this displays fine, in webkit browsers it will wobble back and forth however. The direction of the wobble naturally depends on the direction the sprite sheet is scrolling on. Since the code is identical for moz and webkit and the image perfectly aligned I have concluded the only explanation is a problem in webkit when playing sprite sheet images in reverse.

I have tried different images and have used sheets that are arranged vertically instead, this has not resolved the issue. Currently this means that in order to have an animation that plays forward on one event and backwards on another in webkit it is necessary to include additional frames with such an animation on them. This is far from ideal with long animation sequences since it will waste resources.

[Dean Jackson]

Reproduces in ToT. Guess: looks like a bug in rounding of the steps function.

[Radar WebKit Bug Importer]

<rdar://problem/11349625>

[David Barr]

Confirmed by Dean Jackson (dino).

[Cameron McCormack (:heycam)]

The image used in the testcase is no longer available, so it's hard to see if the problem still exists. Animation support has improved greatly since 2012, and I cannot see any WPTs in css/css-{easing,transitions,animations} involving the steps function that we fail. Please re-open if there is still an issue.