2012-07-12 3 views
0

IE9에서 정확한 javascript 표시 문제가 있습니다. 다른 브라우저 (Firefox, Opera, Chrome, Safari)는 잘 작동하지만 IE의 애니메이션은 유창하지 않습니다. 예를 들어, 왼쪽에서 오른쪽으로 드래그 할 수있는이 줄을보십시오 (포스트의 끝에 링크).IE9raphraph animation issue

자바 스크립트 코드 :

var w = 1250; 
var h = 650; 

var drawing = Raphael("obrazek",w,h);             

var Ax = 50 
var Ay = 50 
var Ey = 500 

var w = 1250; 
var h = 650; 

var drawing = Raphael("obrazek",w,h);             

var Ax = 50 
var  function onDragMove(dx,dz) { 
    this.onDragUpdate(dx - (this.deltax || 0), dz - (this.deltaz || 0)); 
    this.deltax = dx; 
    this.deltaz = dz; 
} 
function onDragStart() { this.deltax = this.deltaz = 0; } 

function onDragStop() { this.onDragStop(); } 


// line 1     
var Ax 
var line = drawing.path([["M",Ax,Ay],["L",Ax,Ey]]).attr({"stroke-width":3}) 
line.drag(onDragMove,onDragStart) 
line.attr({"cursor":"move"}) 
line.onDragUpdate = function(dx,dz) { 

Ax += dx 
line.attr({"path":[["M",Ax,Ay],["L",Ax,Ey]]}) 

} 

및 해당 HTML :

<html> 
    <head> 
     <script src="raphael.js"></script> 
    </head> 
    <body> 
     <div id="obrazek"> 
      <script src="ietest.js"></script> 
     </div> 
    </body>     
</html> 

또는 여기 IE9에서이 문제를보고 크롬과 비교 : 사전에

http://mech.fsv.cvut.cz/~stransky/ietest/ietest.html

감사를 어떤 도움이든.

답변

0

페이지에 doctype이 없으므로 쿼크 모드로 렌더링됩니다. IE9는 quirks 모드에서 SVG 대신 VML을 사용하므로 렌더링 속도가 느려집니다. 그냥 HTML의 첫 번째 줄에 추가 :

<!DOCTYPE html> 

그러나, 코드가 다른 문제가있다 :

  1. 누락 세미콜론. 어떻게 위험 할 수 있는지 good explanation이 있습니다.
  2. 변수를 다시 선언하고 다시 정의합니다.
  3. mousemove 나 scroll과 같이 빠르게 반복되는 이벤트를 처리 할 때 스로틀 링을 사용하여 글리치 및 성능 문제를 다시 그리거나 다시 그리는 것을 피하는 것이 좋습니다. 자세한 내용은 here을 참조하십시오. 해당 사이트에서 플러그인을 포함하고 drag 다음 바인딩 대체 : 사실

line.drag($.throttle(30, onDragMove), onDragStart);

도 크게 렌더링 성능을 향상시킬 수있는 문서 타입을 지정하지 않고이 일을하지만, 지정하지 않을 이유가 없습니다 그것 모두.

+0

대단히 감사합니다! DOCTYPE을 추가하면 작업이 완료되었습니다. – user1520592