消失的转换

我有一个奇怪的问题，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财产style和off.top和off.left是我所期望的他们。

但是，当我通过phantomJS运行这个时，看起来transform被剥离出来。该outerHTML看起来完全像以前一样，但我行访问style.transform回报：

undefined

这并不是说style.width和style.height既可以仍然可以如预期访问。而现在，如果没有应用转换，我的图像没有正确定位。

有没有人知道这里可能会发生什么？我的transform去哪了？

编辑：

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

来源

2015-08-25 Matt Burland

你使用什么PhantomJS版本？（你有没有试过PhantomJS 2？）PhantomJS有可能以某种方式无法重新评估CSS（尝试自己动手，可能用'document.body.style.zoom = document.body.style.zoom;'）。 –

@ ArtjomB。我正在运行2.0.0.0 –

@ArtjomB。 'document.body.style.zoom'技巧似乎没有做任何事情来迫使它重新评估。然而，强迫它重新评估似乎是一个好主意。 –

所以看来问题是幻影J2S根本不支持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。

来源

2015-08-25 20:24:49

回答

相关问题