Bug Tracker


Ticket #11971 (closed bug: fixed)

Opened 22 months ago

Last modified 22 months ago

Animating background-position fails in IE8

Reported by: lgarvey Owned by: gibson042
Priority: high Milestone: 1.8
Component: effects Version: 1.7.2
Keywords: Cc:
Blocking: Blocked by:


I'm attempting to animate a background image. As per the following jsfiddle:


This fails in IE8 ultimately because


on the div returns "right". In chrome it returns "100%" and in firefox it returns nothing. This breaks the animation since it cannot retrieve the starting position of the background to be animated.

The $.css inconsistency can be easily tested using the following jsfiddle:


If someone can point me towards a jQuery test that fixes a similar cross-browser inconsistency I'd gladly write up a proper test-case and submit a patch via github

Change History

comment:1 Changed 22 months ago by dmethvin

#11972 is a duplicate of this ticket.

comment:2 Changed 22 months ago by dmethvin

#11973 is a duplicate of this ticket.

comment:3 Changed 22 months ago by dmethvin

  • Owner set to lgarvey
  • Status changed from new to pending

The W3C has really made a mess of things with backgroundPosition. Normally there are breakout properties that let you get to all the shorthand ones. That doesn't seem to be the case here. We had a pull request and ticket trying to address it, but it got a lot bigger than we wanted it to be and even then I wasn't sure it would handle all the permutations of backgroundPosition.

Would this solve your use case?


comment:4 Changed 22 months ago by lgarvey

  • Status changed from pending to new

My actual problem is that animate breaks in IE8 (I haven't tested in other versions of internet explorer) but works fine in FF, Chrome and Safari. This is because the animate function ends up relying on $.css to retrieve a starting position for the animation and assumes that calling $.css will return either nothing (or empty-string) which is what firefox returns or a numerical value, returned by chrome and safari.

Something along the lines of:


Should fix the issue (completely untested and commit not performed on a topic branch either. I probably should have gisted it)

comment:5 Changed 22 months ago by gibson042

  • Owner changed from lgarvey to gibson042
  • Priority changed from undecided to high
  • Status changed from new to assigned
  • Component changed from unfiled to effects
  • Milestone changed from None to 1.8

comment:6 Changed 22 months ago by Richard Gibson

  • Status changed from assigned to closed
  • Resolution set to fixed

Fix #11971: force numeric animation start to be numeric, closes gh-836.

Changeset: 1793eab32bc8a00b2ad041c9b10ad3bdd2bec702

comment:7 Changed 22 months ago by Richard Gibson

Fix #11971 unit test in browsers lacking backgroundPositionX.

Closes gh-850.

Changeset: 376f4e8cf637e76445082d7fdb88ab420d488b5c

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.


Add a comment

Modify Ticket

as closed

E-mail address and user name can be saved in the Preferences.

Note: See TracTickets for help on using tickets.