当canvas元素与另一个div重叠时（Safari 5.1/Mac 10.7.1）

Question

我英语说得不太好。 我开发基于 html5 的网络应用程序。 我测试过 safari、chrome、firefox。 直到safari 5.0都没问题。 但升级 safari 5.1 后，只有 safari 5.1、Mac 10.7.1 出现此问题。

当canvas元素与另一个div重叠时会出现此问题。

---

var d = document.createElement ("div");
document.body.appendChild ( d );

var canvas = document.createElement ("canvas");
canvas.style.backgroundColor = "pink";
canvas.style.position = "absolute";
canvas.style.left = "0px";
canvas.style.top = "0px";
canvas.style.width = "100px";
canvas.style.height = "100px";
d.appendChild ( canvas );
var c2d = canvas.getContext("2d");

var d1 = document.createElement ("div");
d.appendChild ( d1 );
d1.style.left = "50px";
d1.style.top = "50px";
d1.style.width = "500px";
d1.style.height = "100px";
d1.style.position = "absolute";
d1.style.overflow = "hidden";
d1.style.backgroundColor = "gray";

var red = document.createElement ("div");
d1.appendChild ( red );
red.style.position = "absolute";
red.style.left = "10px";
red.style.top = "10px";
red.style.width = "100px";
red.style.height = "100px";
red.style.display = "none";
red.style.backgroundColor = "red";

var yellow = document.createElement ("div");
red.appendChild ( yellow );
yellow.style.position = "absolute";
yellow.style.left = "10px";
yellow.style.top = "10px";
yellow.style.width = "50px";
yellow.style.height = "50px";
yellow.style.backgroundColor = "yellow";


var but = document.createElement ("div");
d.appendChild ( but );
but.style.position = "absolute";
but.style.left = "200px";
but.style.top = "10px";
but.style.width = "100px";
but.style.height = "30px";
but.style.backgroundColor = "black";
but.innerHTML = "Click";
but.style.color = "white";

var flag = true ;
but.onmousedown = function ()
{
    var gap = 5 ;
    red.x = 10 ;
    red.style.display = "block";
    var fn = function ()
    {
        red.style.left = (red.x+gap)+"px";
        red.x += gap ; 

        flag = !flag ;
        if ( red.x > 1000 ) return ;
        setTimeout( fn, 10 );
    }

    setTimeout( fn, 10 );

}

---

Red-div 有 Yellow-div 作为子级。如果红格移动，那么预计黄格也会移动。 但不要移动 Yellow-div 仅限 safari 5.1 mac 10.7.1。 如果画布区域和子 div 重叠，就会出现此问题。 并且不会发生不重叠的情况并且不执行“canvas.getContext('2d')”。

这只是 Safari 的错误吗？ 有什么解决办法吗？

谢谢。