Why is Raphael.JS creating paper with dimensions 1000x1000?

Posted by Bryan on Stack Overflow See other posts from Stack Overflow or by Bryan
Published on 2011-01-11T01:48:13Z Indexed on 2011/01/11 1:53 UTC
Read the original article Hit count: 531

I have a demo using raphael.js. The code for it is very simple but when viewed in Internet Explorer (less that version 9) I get a Raphael canvas that is 1000px by 1000px and I can't figure out why. I'm using version 1.5.2 of Raphael. Code below:

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Raphael Test</title>
    <link rel="stylesheet" type="text/css" href="test.css">
    <link href="../shared/img/favicon.png" rel="shortcut icon">
  </head>
  <body>
    <div id="graph"></div>
    <script src="../shared/js/raphael/raphael-min.js" type="text/javascript"> </script>
    <script src="test.js" type="text/javascript"> </script>
  </body>
</html>

CSS

/* Graph */
#graph { padding: 5px; width: 477px; height: 299; }

JS

var holder = document.getElementById('graph')
  , width = holder.scrollWidth
  , height = Math.round(width * 0.5625) + 25
  , p = Raphael(10, 50, width, height)
  , c = p.circle(p.width - 50, p.height - 50, 50);
alert(p.width + ' & ' + p.height);

I found a discussion in Raphael's Google group with the same problem but no resolution.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about internet-explorer