PhantomJS not exactly rendering Sankey diagram HTML to PNG

Question

I'm having trouble adjusting PhantomJS to create a PNG file that matches the original browser presentation.

Here is the entire sample html file. It's a sankey diagram creating using rCharts and d3-sankey. (You'll need to save the file to your hard drive and view it from there.)

I'm running on Windows and using rasterize.js:

>> phantomjs.exe rasterize.js test.html test.png

ISSUE: Below is a snip of one of the text strings when viewed in a browser:

And here is a snip of the same string from the PNG created by PhantomJS:

How do I make the text-shadow go away? I've played around with various CSS attributes (text-shadow) and webkit-specific attributes (e.g., -webkit-text-rendering), but can't seem to make it go away.

Is this a setting in PhantomJS? in the underlying webkit? or somewhere else?

Answer 1

rCharts has an undocumented function called take_screenshot that uses CasperJS (which in turn uses PhantomJS to take screenshots of rCharts created visualizations on a given html page.

For example, I forked the example you provided, renamed it as a html file, which you can view here.

I ran rCharts::take_screenshot('http://rcharts.io/viewer/?7063641'), which results in the following screenshot. The take_screenshot function uses system commands, and work well on a Mac. I have not tested it on Windows, so YMMV.

NOTE: You will need to install the dev branch for this feature.

Answer 2

OK - I found the issue. It is related to browser display differences. SANKEY.CSS sets the text shadow:

.node text {
pointer-events: none;
text-shadow: 0 1px 0 #fff;
}

The text-shadow is ignored in Firefox (my default browser) and is properly rendered using Chrome (thanks @ramnath for cluing me into the browser differences!). PhantomJS uses webkit to render pages (which works properly) while Firefox uses gecko (which obviously doesn't implement text-shadow properly.) Fiddling with text-shadow in my original post didn't affect any changes - because Firefox wasn't rendering any changes and I was experimenting in the browser.

SO, the fix is to override .node text-shadow in my main HTML file. After the change, all is rendering as I prefer in the PhantomJS-created PNG.

.node text {
pointer-events: none;
text-shadow: 0 0px 0 #fff;
}

Lesson: to properly test HTML for rendering in PhantomJS on Windows, use Chrome to preview. Both use webkit as the underlying rendering engine.