Question

I’m having a Firefox-specific issue with a script I wrote to create 3d layouts.

The correct behavior is that the script pulls the background-color from an element and then uses that color to draw on the canvas. When a user mouses over a link and the background-color changes to the :hover rule, the color being drawn changes on the canvas changes as well. When the user mouses out, the color should revert back to non-hover color.

This works as expected in Webkit browsers and Opera, but it seems like Firefox doesn’t update the background-color in CSS immediately after a mouseout event occurs, so the current background-color doesn’t get drawn if a mouseout occurs and it isn’t followed up by another event that calls the draw() routine. It works just fine in Opera, Chrome, and Safari. How can I get Firefox to cooperate?

I’m including the code that I believe is most relevant to my problem. Any advice on how I fix this problem and get a consistent effect would be very helpful.

function drawFace(coord, mid, popColor,gs,x1,x2,side) {
    /*Gradients in our case run either up/down or left right.
    We have two algorithms depending on whether or not it's a sideways facing 
    piece. Rather than parse the "rgb(r,g,b)" string(popColor) retrieved from 
    elsewhere, it is simply offset with the gs variable to give the illusion that it 
    starts at a darker color.*/

    var canvas = document.getElementById('depth');
//This is for excanvas.js
    var G_vmlCanvasManager;
    if (G_vmlCanvasManager != undefined) { // ie IE
        G_vmlCanvasManager.initElement(canvas);
    }
    //Init canvas
    if (canvas.getContext) {
        var ctx = canvas.getContext('2d'); 
        if (side) var lineargradient=ctx.createLinearGradient(coord[x1][0]+gs,mid[1],mid[0],mid[1]);
        else var lineargradient=ctx.createLinearGradient(coord[0][0],coord[2][1]+gs,coord[0][0],mid[1]);
        lineargradient.addColorStop(0,popColor);
        lineargradient.addColorStop(1,'black');
        ctx.fillStyle=lineargradient;
        ctx.beginPath();
        //Draw from one corner to the midpoint, then to the other corner, 
        //and apply a stroke and a fill.
        ctx.moveTo(coord[x1][0],coord[x1][1]);
        ctx.lineTo(mid[0],mid[1]);
        ctx.lineTo(coord[x2][0],coord[x2][1]);
        ctx.stroke();
        ctx.fill();
    }
}

function draw(e) {
    var arr = new Array()
    var i = 0;
    var mid = new Array(2);
    $(".pop").each(function() {
        mid[0]=Math.round($(document).width()/2);
        mid[1]=Math.round($(document).height()/2);
        arr[arr.length++]=new getElemProperties(this,mid);
        i++;
    });
    arr.sort(sortByDistance);
    clearCanvas();
    for (a=0;a<i;a++) {
        /*In the following conditional statements, we're testing to 
        see which direction faces should be drawn,
        based on a 1-point perspective drawn from the midpoint. In the first 
        statement, we're testing to see
        if the lower-left hand corner coord[3] is higher on the screen than the 
        midpoint. If so, we set it's gradient
        starting position to start at a point in space 60pixels higher(-60) than 
        the actual side, and we also declare which corners make up our face, 
        in this case the lower two corners, coord[3], and coord[2].*/
        if (arr[a].bottomFace) drawFace(arr[a].coord,mid,arr[a].popColor,-60,3,2);
        if (arr[a].topFace) drawFace(arr[a].coord,mid,arr[a].popColor,60,0,1);
        if (arr[a].leftFace) drawFace(arr[a].coord,mid,arr[a].popColor,60,0,3,true);
        if (arr[a].rightFace) drawFace(arr[a].coord,mid,arr[a].popColor,-60,1,2,true);
    }
}

$("a.pop").bind("mouseenter mouseleave focusin focusout",draw);

If you need to see the effect in action, or if you want the full Javascript code, you can check it out here:
http://www.robnixondesigns.com/strangematter/

Answer 1

You could delay your javascript method by a few milliseconds by using a callback.