Side navigation
#11971 closed bug (fixed)
Opened June 26, 2012 12:10AM UTC
Closed July 06, 2012 01:11PM UTC
Last modified July 10, 2012 02:44AM UTC
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: | ||
| Blocked by: | Blocking: |
Description
I'm attempting to animate a background image. As per the following jsfiddle:
This fails in IE8 ultimately because
jQuery.css('backgroundPositionX')
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
Attachments (0)
Change History (7)
Changed June 26, 2012 01:25AM UTC by comment:1
Changed June 26, 2012 01:08PM UTC by comment:3
| owner: | → lgarvey |
|---|---|
| status: | new → 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?
https://github.com/brandonaaron/jquery-cssHooks/blob/master/bgpos.js
Changed June 26, 2012 01:29PM UTC by comment:4
| status: | pending → 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:
https://github.com/lengarvey/jquery/commit/51e070009d53c3b17c627d7f90f07860f74fa34e
Should fix the issue (completely untested and commit not performed on a topic branch either. I probably should have gisted it)
Changed June 26, 2012 05:54PM UTC by comment:5
| component: | unfiled → effects |
|---|---|
| milestone: | None → 1.8 |
| owner: | lgarvey → gibson042 |
| priority: | undecided → high |
| status: | new → assigned |
#11972 is a duplicate of this ticket.