JavaScript로 DIV에 애니메이션을 적용하면 Chrome에서 아티팩트가 렌더링됩니다.

Question

실험으로 저는 캔버스 개체를 사용하지 않고 JavaScript로 AS3의 Sprite 기능을 복제하려고합니다. 나는 절대적으로 배치 된 div를 사용하고 CSS 특성을 조작하는 것이 아무 생각할 것도 없다고 생각했지만, 크롬에서는 애니메이션이 이상한 유물 (겉으로보기에는 다시 그리기 문제로 인해)을 도입한다고 생각했습니다.

내가 잘못하고있는 것을 찾을 수 없습니까? 코드는 사실 아주 간단합니다. 여기에 도움이되지 않았다 해봤 몇 가지 사항은 다음과 같습니다. (절대 위치 반대로)

• 을 상대적으로 위치 div의 사용은
• 여백을 사용
• 추가 (& 왼쪽 속성을 맨 반대로.) (컨테이너 사업부에 추가 반대.) 몸에 직접 객체

현재 단순화 된 바이올린을 볼 수 있습니다 (requestAnimationFrame 반대)에서는 setTimeout을 사용 :,645,

편집 : http://jsfiddle.net/BVJYJ/4/

그리고 여기 당신이 내 브라우저에 유물 볼 수 있습니다 : 이것은 (윈도우 7 64 비트, 크롬 21.0.1180.75 내 설정에서 버그가 수 있습니다

을). 다른 브라우저에서는이 문제가 발생하지 않습니다. 누군가 내가 잘못하고있는 것에 대해 논평 할 수 있다면 크게 감사 할 것입니다. 나는이 문제를 해결할 수있는 이유보다 더 궁금해. 즉, 모든 설명은 환영합니다. :)

EDIT : RAF가 사용되었다는 느낌이 들더라도 setTimeout을 사용하는 버그가 샘플 코드에있었습니다. requestAnimationFrame은 기본 변환 문제를 해결하지만 순환 게재와 같은 CSS 변환에서는 문제가 남아 있습니다.

Answer 1

liteAccordion 플러그인에서 동일한 문제가있었습니다. http://jsfiddle.net/ZPQBp/1/

Answer 2

일부 연구 setTimeout 여러 가지 이유로 인해 문제가 발생할 수 있음을 보여줍니다. 당신은 정말로 requestAnimationFrame을 사용해야합니다 :

타이머는 밀리 초 단위로 정확하지 않습니다. 여기 해상도 1 몇 가지 일반적인 타이머에게 있습니다

• 인터넷 익스플로러 8은 이전 15.625ms
• 인터넷 익스플로러 9의 타이머 해상도가 나중에 4ms의의 타이머 해상도를 가지고있다. Firefox
• 및 Safari의 타이머 해상도는 ~ 10ms입니다.
• 크롬의 타이머 해상도는 4ms입니다.

인터넷 익스플로러 이전 버전 9는 15.625 MS 1의 타이머 해상도를 가지고, 그래서 0과 15 사이의 값이 다른 0 또는 15 만 중 아무것도 없었다. Internet Explorer 9는 타이머 해상도를 4 ms, 즉 으로 향상 시켰지 만 애니메이션의 경우 아직 그다지 구체적이지 않습니다.

Chrome의 타이머 해상도는 4ms이고 Firefox 및 Safari는 10ms입니다. 최적의 디스플레이 간격을 설정하더라도 여전히 원하는 타이밍에 가까워지면 이됩니다.

참조하십시오 브라우저에서 어떤 일이 일어나고 그 밖의 무엇을

http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/는 또한

setTimeout

은 고려하지 않습니다. 페이지가 일 필요가 없거나, 애니메이션 자체가 페이지를 스크롤하여 다시 호출 할 필요가 없게되었을 때 CPU 뒤에 숨겨진 탭이 숨겨져있을 수 있습니다. Chrome은 숨겨진 탭에서 스로틀 setInterval 및 setTimeout을 1fps로 지정하지만이 브라우저 은 모든 브라우저에 의존해서는 안됩니다.

둘째, setTimeout은 컴퓨터가 가능할 때 이 아니라 원하는 화면 만 업데이트합니다. 즉, 빈약 한 브라우저가 전체 화면을 다시 그려 넣는 동안 애니메이션을 다시 그려야하고 애니메이션 프레임 속도가 화면의 다시 그려진 경우 동기화되지 않으면 처리 능력이 더 많이 걸릴 수 있습니다. 즉, CPU 사용량이 많고 컴퓨터의 팬이 걷잡을 수 없거나 휴대 기기의 배터리 잔량이 가득 듭니다. Nicolas Zakas는 영향 타이머 해상도가 관련 article의 애니메이션에있는 훌륭한 작업 을 설명합니다.

참조 : http://creativejs.com/resources/requestanimationframe/

Answer 3

그것은 subpixel positioning 함께 할 수있는 뭔가가. 가장 가까운 픽셀로 반올림하면 해당 렌더링 오류가 표시되지 않습니다.

thisRef.block.style.left = Math.round((x + (mouseX - ox - x) * .125)) + "px"; 
thisRef.block.style.top = Math.round((y + (mouseY - oy - y) * .125)) + "px";