当它们都缩放后，如何正确地计算图像并将其放置在另一个图像之上-跨浏览器？

Question

I have a base image with items on it. If the user disables one of the items, it should then show as disabled. To handle this, I use a second image of the item disabled (a png) and place that in the correct location above the background image.

When there's no scaling, this works perfectly across all browsers.

When there's scaling (for example, in a mobile browser when the image is 40% of the original size) this only works in Firefox . Firefox always places the image in the correct spot, covering the item underneath.

The other browsers (Chrome on Android, Safari iOS), are always off by 1-2 pixels depending on the scaling level. So you can see a little bit of the item below.

How can I do this so it works cross-browser?

var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;

//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
    var disabled = disableds[ i ];

    /**
     * I also tried with "parseInt", but it still doesn't work.
     * 
     * originalLeft/Top/Width/Height are the values saved in 
     * JavaScript when the page is first loaded before everything
     * is scaled.
     */
    disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
    disabled.style.top = ( heightRatio * disabled.originalTop ) + "px";
    disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
    disabled.style.height = ( heightRatio * disabled.originalHeight ) + "px";

    //Make visible
    disabled.style.visibility = "visible";
}

Answer 1

Does your background use white or another solid color? Then you could try this: place an empty div over the bg portion and then apply background-color: rgba(255, 255, 255, .5) for example. This should give you the same effect, plus it would save a whole lot of additional images. But only works if "the bg of your bg" is a solid color.

Answer 2

The issue arises in WebKit only, where separately calculating the width and height ratio gives the browser an inability to properly size and place images. If I change my code to only use the width ratio, then everything places correctly across all browsers:

//We no longer use height ratio for the height/top calculations
//var heightRatio = bgOffsetHeight / originalHeight;
var widthRatio = bgOffsetWidth / originalWidth;

//Place the disabled items
for ( var i = 0; i < disableds.length; i++ )
{
    var disabled = disableds[ i ];

    /**
     * I also tried with "parseInt", but it still doesn't work.
     * 
     * originalLeft/Top/Width/Height are the values saved in 
     * JavaScript when the page is first loaded before everything
     * is scaled.
     */
    disabled.style.left = ( widthRatio * disabled.originalLeft ) + "px";
    disabled.style.top = ( widthRatio * disabled.originalTop ) + "px";
    disabled.style.width = ( widthRatio * disabled.originalWidth ) + "px";
    disabled.style.height = ( widthRatio * disabled.originalHeight ) + "px";

    //Make visible
    disabled.style.visibility = "visible";
}