Reported width of "auto" span is greater than actual, rendered width

Question

I'm using rangy to create a highlight for a selection for text that has been rendered using pdf.js. The CSS for the highlighted span is very simple:

.image-highlight {
    background-color: rgba(152, 210, 146, 0.45);
    border: 1px solid #000000; //added this for debugging.
    cursor: pointer;
}

Since successive highlights in rangy are dependent on the previous highlights, I'm trying to copy the height and width of the span that is created by rangy and then place it in another root node. However, I'm noticing that the width of the newly-created span is greater than the original span. What is also frustrating is that Chrome reports the same width for both spans in px, even though they are obviously different!

The width for the first span (created by rangy) has a width of auto as reported by Chrome when viewed under Metrics in the developer toolbar, whereas the width for the second span (that I create) is explicitly set via $.width.

Here is how I am copying the span over:

var $selectionSpan = jQuery("<span></span>").
    attr("id", "created-" + new Date().getTime()).
    css("position", "absolute").
    css("z-index", 999).
    offset({
        top: $span.offset().top,
        left: $span.offset().left
    }).
    height($span.height()).
    width($span.width());

$selectionSpan.get(0).className = $span.get(0).className;

And here are pictures of Chrome reporting that the width is the same for both spans:

As you can see, the width is being reported as 112px even though they are obviously different. Why is this happening?

Answer 1

I figured this out. This was due to pdf.js applying a CSS3 scale-transformation. I would expect Chrome to report the transformed width and not the un-transformed width, but I guess that might be a Chrome bug.

I was able to fix this by appending the following to the code that creates my span:

css("-webkit-transform", $span.parent("div").css("-webkit-transform")).
css("-moz-transform", $span.parent("div").css("-moz-transform")).
css("-ms-transform", $span.parent("div").css("-ms-transform")).
css("-o-transform", $span.parent("div").css("-o-transform")).
css("-transform", $span.parent("div").css("-transform")).
css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")).
css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")).
css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")).
css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")).
css("-transform-origin", $span.parent("div").css("-transform-origin"));

So the complete code looks like this:

var $selectionSpan = jQuery("<span></span>").
    attr("id", "created-" + new Date().getTime()).
    css("position", "absolute").
    css("z-index", 999).
    offset({
        top: $span.offset().top,
        left: $span.offset().left
    }).
    height($span.height()).
    width($span.width()).
    css("-webkit-transform", $span.parent("div").css("-webkit-transform")).
    css("-moz-transform", $span.parent("div").css("-moz-transform")).
    css("-ms-transform", $span.parent("div").css("-ms-transform")).
    css("-o-transform", $span.parent("div").css("-o-transform")).
    css("-transform", $span.parent("div").css("-transform")).
    css("-webkit-transform-origin", $span.parent("div").css("-webkit-transform-origin")).
    css("-moz-transform-origin", $span.parent("div").css("-moz-transform-origin")).
    css("-ms-transform-origin", $span.parent("div").css("-ms-transform-origin")).
    css("-o-transform-origin", $span.parent("div").css("-o-transform-origin")).
    css("-transform-origin", $span.parent("div").css("-transform-origin"));