이미지의 Raphael.js 애니메이션이 Chrome에서 다시 칠하지 않음

Question

Chrome에서 이미지를 애니메이션으로 적용하려고 할 때만 나타나는 것처럼 보입니다. 내가하고 싶은 것은 Raphaël.js에서 뒤로 움직일 이미지를 만드는 것입니다. 문제를 설명하는 jsfiddle을 만들었습니다. Chrome을 사용하여 개발 한 이후 Chrome에서 작동 했었지만 이후 버전의 Chrome에서는 깨진 것 같습니다. 예를 들어 이미지를 rect로 변경하면 잘 렌더링 된 것처럼 보입니다. 애니메이션이 포함 된 화면의 크기를 조정하면 다시 그립니다.

var moveForth = function() { 
    useControl.animate({x : 38, y: 0}, 900, moveBack); 
}; 

var moveBack = function() { 
    useControl.animate({x : 0, y: 0}, 600, moveForth); 
}; 

var R = Raphael("holder", 500, 500); 
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18); 
moveForth(); 

그것은 단지 크롬에서 일어나는 내가 Raphael.js 2.1.2 최신 사용

http://jsfiddle.net/k69yzz0o/1/.

이 문제를 어떻게 해결할 수 있습니까?

Answer 1

예, Chrome에서 rect를 dirty로 인식하고 다시 칠하기를 거부하는 것으로 보입니다. 이 영역을 마우스로 움직이면서 작동하는지 확인할 수 있습니다.

실제 위치를 사용하는 대신 변형을 사용하여 동일한 애니메이션을 시도했습니다. 오브젝트를 변형하면 현대 Chrome이 해당 영역을 다시 그리라고 분명하게 알 수 있습니다. 여기

는 노력 : 나는 또한 그것을 더 자연스러운 바운스를 제공하는 일부 완화 (">")를 추가

var moveForth = function() { 
    useControl.animate({"transform":"T38,0"}, 900, ">", moveBack); 
}; 

var moveBack = function() { 
    useControl.animate({"transform":""}, 600, "<", moveForth); 
}; 

var R = Raphael("holder", 500, 500); 
useControl = R.image("http://i.imgur.com/ta8zlD2.png", 0, 0, 189, 18); 
moveForth(); 

.