CODEWITHSUNDEEP
javascriptanimationinternet-explorer-9raphaeldoctype
user1520592
user1520592

Reputation: 3

IE9 raphael animation issue

I have problem with display of correct javascript in IE9. Other browsers (Firefox, Opera, Chrome, Safari) work well, but animation in IE is not fluent. For example see this line which can be dragged from left to right (link at the end of the post).

javascript code:

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]]})

}

and corresponding HTML:

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

or see the problem in IE9 here and compare it with Chrome:

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

Thank in advance for any help.

Upvotes: 0

Views: 495

Answers (1)

unclenorton
unclenorton

Reputation: 1625

Your page is missing doctype, so it is rendered in quirks mode. IE9 uses VML instead of SVG in quirks mode, which probably results in slower rendering. Just add this on the first line of your html:

<!DOCTYPE html>

However, your code has some other problems:

  1. Missing semicolons. There is a good explanation of how it may be dangerous.
  2. Variable re-declarations and re-definitions.
  3. When handling rapidly repeating events like mousemove or scroll, it is reasonable to use throttling to avoid redrawing/repainting glitches and performance problems. You can read more about it here. Include the plugin from that site and replace your drag binding with the following:

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

In fact, even doing this without specifying the doctype can greatly improve the rendering performance, but there's no reason not to specify it altogether.

Upvotes: 0

Related Questions