I’m printing the following presentation using the latest Prince:

prince http://shwr.me/shower/themes/ribbon/ index.pdf

…and getting really bad results for CSS gradients used to draw lines (see black.png attached)

1. Sometimes lines are invisible (page 1)
2. Sometimes the whole element is just filled with black (pages 7 & 11)

Chrome, Firefox, Opera, Safari and IE work fine with such gradients.

Here’s mixin I use to produce such lines in SCSS:

// Underline
@mixin underline($color, $width) {
	background:
		linear-gradient(
			to top,
			$color,
			$color #{$width}em,
			transparent #{$width}em,
			transparent
		) repeat-x;
	}

And here’s output CSS for links (expanded with prefixes by Autoprefixer)

a {
	background:-webkit-gradient(
			linear,
			left bottom,
			left top,
			from(currentColor),
			color-stop(.09em,currentColor),
			color-stop(.09em,transparent),
			to(transparent))
		repeat-x;
	background:-webkit-linear-gradient(
			bottom,
			currentColor,
			currentColor .09em,
			transparent .09em,
			transparent)
		repeat-x;
	background:linear-gradient(
			to top,
			currentColor,
			currentColor .09em,
			transparent .09em,
			transparent)
		repeat-x;
	color:#4b86c2;
	text-decoration:none;
	}

I wonder if it’s a problem with currentColor or with gradients?

1. black.png‎ 28.6 kB

Edited 25 May 2014 by pepelsbey

Prince does not support transparency/opacity in gradients at the moment, and I think that's what is causing the problem here.