I'm encountering a strange issue with phantomJS where it seems to be losing the transformations applied to certain images. On my webpage, I have a function that takes some HTML and inserts it into the page. Here's an example of how it looks:
function RenderRaw(html, id) {
elem = $("#raw");
elem.html(html);
}
The HTML I'm passing includes images with transformations like this:
<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">
Everything works fine in my browser. However, when I check the image load event using debugDiv, I notice that the transform property is missing when running through phantomJS:
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>");
}
While style.width and style.height can still be accessed as expected, the transform property appears to be stripped out.
After further investigation, it seems that phantomJS recognizes webkitTransform but not transform. Is there a workaround for this limitation?