While playing around with the cool new <canvas>-tag, I found that Safari seems to have a bug in its canvas implementation -- it stops working as soon as you link an external style sheet to the HTML, even if the style sheet is empty.
I'm not sure yet if this is an actual bug or if I'm overlooking something; but then, nobody is actually using <canvas> on styled production sites, and all the demos I saw online are using unstyled HTML, so it's not that unreasonable that it's not a well-known bug.
Update: I posted this to the webkit-dev mailing list and got a reply from Dave Hyatt:
Yeah, clearly a bug in our code because we defer renderobject creation until stylesheets are loaded. Firefox doesn't exhibit the bug because it blocks its HTML parser while waiting for stylesheets to load. We don't. File it in bugzilla.
So here it is: my first webkit bug, #4884. (Note the palindromic nature of the bug ID.)
Update: 2006-04-10 -- it's fixed!
Test Cases
I created three simple test cases:
- Test 1 - simple page with external CSS, and all canvas drawing done inline
- Test 2 - simple page without external CSS, and all canvas drawing done inline
- Test 3 - simple page with external CSS, and all canvas drawing done via onload()
Both Safari 2.0.1 (412.5) and the most recent WebKit CVS version show the same behavior:
- test 1 doesn't work (blank canvas)
- test 2 works (canvas filled black)
- test 3 works (canvas filled black)
Just to be sure I checked with a recent Firefox 1.5 beta candidate, and all three test cases worked fine (canvas filled black).
Please test this in your version of Safari and let me know how it went. If this is indeed a bug in Safari, we should file this as a bug with Apple.
styles.css
/*
empty file
*/
test1.html
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
</head>
<body>
<canvas id="mycanvas" width="400" height="200"></canvas>
<script type="application/x-javascript">
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
test2.html
<html>
<head>
</head>
<body>
<canvas id="mycanvas" width="400" height="200"></canvas>
<script type="application/x-javascript">
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
</script>
</body>
</html>
test3.html
<html>
<head>
<link rel="stylesheet" href="styles.css" type="text/css">
<script type="application/x-javascript">
function draw(){
var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext("2d");
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
</script>
</head>
<body onload="draw()">
<canvas id="mycanvas" width="400" height="200"></canvas>
</body>
</html>
Comments
Comments are closed. You can contact me instead.