javascript - 消失的转变

Question

我在 phantomJS 上遇到了一个奇怪的问题，不知何故丢失了应用于某些图像的转换。我有一个网页，在该网页中我有一个函数，可以获取一些 html 并将其粘贴到页面中。它看起来像这样:

function RenderRaw(html, id) {
    elem = $("#raw");
    elem.html(html);
}

现在，在我传递的 html 中，我有一些看起来像这样的图像:

<img id="map_layer0_tile_5_1_1" class="layerTile" style="width: 256px;
 height: 256px; visibility: visible; transform: translate(89px, -13px);" src="tile/5/11/5">

现在在我的浏览器中，效果很好。我可以加载页面，运行传递一些 html 的函数，其中包含应用了转换的图像，它们都出现在正确的位置。我通过查看图像加载事件进行了一些调试(其中 debugDiv 只是页面其他位置的常规 div):

var imgs = elem.find("img");
imgs.on('load', function(e) {
    var off = $(e.target).offset();
    var p = $("<p>").text(e.target.outerHTML);
    debugDiv.append(p);
    debugDiv.append("<p>" + e.target.style.transform + "</p>");
    debugDiv.append("<p>" + e.target.style.width + ", " + e.target.style.height + "</p>");
    debugDiv.append("<p>" + e.target.src + ": top=" + off.top + ", left=" + off.left + "</p>");
}

我确实看到了我所期望的，特别是，我看到了

translate(89px, -13px)

我在哪里获得 style 的 transform 属性，以及 off.top 和 off.left 是什么我希望他们是这样。

但是，当我通过 phantomJS 运行它时，似乎 transform 被删除了。 outerHTML 看起来和以前一模一样，但我访问 style.transform 的行返回:

undefined

并不是说 style.width 和 style.height 仍然可以按预期访问。现在，如果不应用变换，我的图像就无法正确定位。

有人知道这里会发生什么吗？我的转换去哪儿了？

编辑:

仔细观察，如果我 JSON.stringify 幻影中的 style 对象，我可以看到它没有 transform 属性，但它确实有 webkitTransform。所以我猜 phantomJS 不支持 transform？

Answer 1

看来问题是 phantomJS 2.0 根本不支持 transform 。 release notes中没有提到它很遗憾。为了解决这个问题，我在每个图像的加载事件中执行了此操作:

var thisImg = $(e.target);
if (e.target.style.transform === undefined && e.target.style.webkitTransform !== undefined) {
    var style = thisImg.attr("style");
    style += "-webkit-transform: " + /transform:([^;]*;)/.exec(style)[1];
    thisImg.attr("style", style);
}

基本上提取transform并将其复制到-webkit-transform。