Raphael graphic not showing in IE8

问题

Right now I'm having trouble getting a simple Raphael graphic to show in a extJS panel.

afterRender: function(){
        var size = Math.min(this.getHeight(), this.getWidth());
        this.innerEl = this.el.createChild({
            cls : 'ext-ux-clock-inner'
        });
        this.canvas = Raphael(this.innerEl.dom, size, size);
        var circle = this.canvas.text(50, 40, 'test').attr( {
              font : '14px Helvetica, Arial',
              stroke : "none",
              fill : '#fff'
            });
        TimelineWindowPanel.superclass.afterRender.apply(this,arguments);
    }

The text shows up fine in Firefox and Chrome, however I can't seem to get this text to display in IE8. I've tried using the uncompressed version along with the minified version with no luck. Does anybody know why Raphael doesn't work with IE8 with extJS?

Edit: If I change IE8 into the compatibility mode it shows the Raphael graphic

回答1:

I found a work around for IE8. It seems that IE8 attempts to draw onto the canvas before the ExtJS window appears on the screen. I'm guessing what's happening is that IE8 attempts to draw onto the canvas and fails and doesn't try to redraw. So the Raphael image never appears in the canvas. I was able to solve this by delaying the draw by .3 seconds using the javascript function setInterval()

来源：https://stackoverflow.com/questions/4501559/raphael-graphic-not-showing-in-ie8