CODEWITHSUNDEEP
jquerycsscross-browser
user1576183
user1576183

Reputation: 51

Animate background-position works different on browsers

fiddle here - The goal is to make some perspective effect when scrolling, on background.

It works fine on Chrome, on IE7, IE8, but:

It works oddly on IE9 (background resets its position before animation) It does not work on Mozilla and Opera (scrolling is working but position of background not)

It animates scrolling of page when mousewheel event is fired and it animates background position to move a little more than body is scrolling, what gives perspective feel

Upvotes: 1

Views: 376

Answers (1)

Ryan Conaway
Ryan Conaway

Reputation: 446

To solve the problem with IE9 (and Mozilla, etc), remove the '-x' from 'background-position-x'. It's no longer in use by modern browsers since it's not part of any standard specification. If you want to change the background position with jQuery's animate method, you have to include BOTH X and Y attributes.

$('div').animate({'background-position':'0px 50px'});
-OR-
$('div').animate({'background-position':'50px 0px'});

background-position-x and background-position-y were css elements that Microsoft implemented in older versions of IE. The folks at Google liked the idea and so adopted it. I believe Chrome still lets you split the attributes, but I wouldn't count on it :) Lastly, and this goes along with the 'don't count on it' scenario, you don't have to include the 'px' with the dimensions. Some elements don't require it for zero values, but some browsers seem to require it in javascript.

Upvotes: 1

Related Questions