wkhtmltoimage CSS3 gradient rendering in Snapshots

Question

I am using wkhtmltoimage to render a snapshot for my website which contains a background gradient but it doesn't show up in the generated snapshot.

I tried using on Ubuntu and Windows but am not able to find the error.

I even tried using the simplest command without any parameters.

wkhtmltoimage.exe <website_link> <image_name>

My original page looks same in all major browsers Here is the screen print

And here is the one generated by wkhtmltoimage

I am not sure what exactly is the problem. I tried looking at their existing issues as well but couldn't find anything.

Answer 1

Did you check your gradient syntax. wkhtmltopdf uses the webkit syntax.

  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgb(64,128,176)),color-stop(100%,rgb(1,73,129)));
  background:linear-gradient(to bottom,rgb(64,128,176) 0%,rgb(1,73,129) 100%);

The second syntax will not count to wkhtmltopdf but the first one works for the version of wkhtmltopdf I have (0.10.0 rc2).

I also found that modern webkit syntax doesn't work. i.e. this didn't work

background: -webkit-linear-gradient(top, #ccc 0%, #888 100%);

As per this : stackoverflow entry

Answer 2

As as 0.12.2.1 of wkhtmltopdf the gradient css - either old or new doesn't work.