브라우저에서 애니메이션 배경색이 다르게 작동합니다.

Question

fiddle here - 목표는 스크롤 할 때 배경 효과를 적용하는 것입니다.

그것은 IE7, IE8에, 크롬에서 잘 작동하지만 :

그것은 IE9에 이상한 작동 그것은 모질라와 오페라 (스크롤이 작동하지만 위치에서 작동하지 않습니다 (배경 animation 전에 위치를 재설정) 배경은하지 않음)의 관점을주는 무슨

마우스 휠 이벤트가 발생 될 때 페이지의 스크롤을 애니메이션과 몸이 스크롤되는 것보다 조금 더 이동하는 배경 위치를 애니메이션은 IE9 (그리고 모질라의 문제를 해결하기 위해

Answer 1

을 느낄 etc)에서 '-x'를 'background-posi'에서 제거하십시오. x-x '. 현대적인 브라우저는 표준 사양의 일부가 아니므로 더 이상 사용하지 않습니다. jQuery의 애니메이션 메서드로 배경 위치를 변경하려면 두 속성을 모두 포함해야합니다.

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

배경 위치-X 및 배경 위치-Y 마이크로 소프트가 IE의 이전 버전에서 구현하는 것이 CSS 요소였다. Google의 사람들은이 아이디어를 좋아했고 그것을 채택했습니다. 나는 크롬이 여전히 속성을 분리 할 수 ​​있다고 믿지만, 나는 그다지 믿지 않을 것이다. 마지막으로, 그리고 '이것에 의존하지 말라'시나리오와 함께, 'px'를 포함 할 필요가 없다. 치수. 일부 요소는 0 값을 요구하지 않지만 일부 브라우저는 javascript에서이를 요구하는 것 같습니다.