Issue with form button elements. element.firstChild undefined, line 6, char 409 in minified

[curiosity26]

When applying the background size behavior to a form button element, the firstChild attribute isn't available because a form button isn't polymorphic of a Node object. In the event that element.firstChild is undefined, another method must be used. Maybe do what CSS3PIE does, wrap the element with a css3-container element and apply the newly created elements inside the css3-container with the original element z-indexed on top?

EDIT

Upon further review, it would seem that it is more directly related to the use of background-size: contain; I just changed a div to use that style and it caused the same error.

REEDIT

I'm an idiot :-) the background-size: contain wasn't the issue I thought it was. I had exact values in a general stylesheet that was overriding my declaration of background-size: contain. So the error is gone, BUT the issue is not fixed. The background is not sizing for form buttons.

[curiosity26]

Ok! I found the issue. It was a couple of things. First off on line 102, change to the following:

// The issue here is that the callback isn't pulling in the correct height and width. If you create an image element within the stack, it seems to fix it. IE, go figure.

var img = expando.img, src = ( rsrc.exec( element.currentStyle.backgroundImage ) || [] )[1], tmp = new Image();

Then on lines 107 through 137:

expando.backgroundSrc = src; expando.somethingChanged = true; img.style.display = "block"; // ensure it's not display:none; won't computer dimensions in IE if display:none tmp.onload = function() { // the tmp image gets the correct height and width var width = tmp.width, height = tmp.height;

        // ignore onload on the proxy image
        if ( width == 1 && height == 1 ) { return; }

        expando.imgWidth = img.width = width;
        expando.imgHeight = img.height = height;
        expando.constrain = false;

        callback();

        img.style.visibility = "visible";
        tmp.onload = null;
    };

    img.style.visibility = "hidden";
    img.src = tmp.src = expando.backgroundSrc;

    // force onload execution
    if ( img.readyState || img.complete ) {
        img.src = tmp.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        img.src = tmp.src = expando.backgroundSrc;
    }

    expando.ignoreNextPropertyChange = true;
    element.style.backgroundImage = "none";

Last but not least, if for some reason the above width or height still comes up 0, the appropriate style attributes used to later compute the delta are NaN. When this happens you have to catch the NaN and return 0 for the delta;

Line 164:

        img.style.top = isNaN(delta) ? 0 : delta + "px";

Line 183:

        img.style.left = isNaN(delta) ? 0 : delta + "px";

Line 201:

        img.style.left = isNaN(delta) ? 0 : -delta + "px";

Line 220:

        img.style.top = isNaN(delta) ? 0 : -delta + "px";

I'm not sure if this helps anyone else, but I know I'm finally able to use the script and THANK GOD! Cause it's so helpful!! Thanks for writing this.

[jefferyto]

Can you try version 0.2.0 to see if your issue is resolved?