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)

我获得transform的{{1}}属性，style和off.top是我期望的属性。

但是，当我通过phantomJS运行时，似乎off.left被剥离了。 transform与以前完全相同，但我访问outerHTML的行返回：

style.transform

并非undefined和style.width仍然可以按预期访问。而现在，如果没有应用变换，我的图像就没有正确定位。

有人知道这里会发生什么吗？我的style.height去了哪里？

编辑：

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

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。

消失的转变

1 个答案: