报告的“自动”跨度宽度大于实际的渲染宽度

Question

我正在使用rangy为使用pdf.js呈现的文字选择创建突出显示。突出显示的span的CSS非常简单：

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

由于rangy中的连续高光取决于之前的高光，我试图复制由rangy创建的span的高度和宽度，然后将其放在另一个根节点中。但是，我注意到新创建的span的宽度大于原始span的宽度。同样令人沮丧的是，Chrome为span中的px报告了相同的宽度，即使它们明显不同！

在开发人员工具栏的span下查看时，Chrome报告的第一个auto（由rangy创建）的宽度为Metrics，而第二个宽度为span（我创建）通过$.width显式设置。

以下是我如何复制span：

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;

以下是Chrome报告的图片，两个span的宽度相同：

正如您所看到的，宽度报告为112px，即使它们明显不同。为什么会这样？

Answer 1

我想出来了。这是因为pdf.js应用了CSS3规模转换。我希望Chrome报告转换后的宽度，而不是未转换的宽度，但我想这可能是Chrome错误。

我可以通过在创建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"));

所以完整的代码如下所示：

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"));