Tables with linear gradient background do not render correctly

Hi There!

I am creating a PDF with Shower Framework. There is a table in the HTML file. Only the last row in the table is being rendered when the PDF is viewed on Chrome. The table appears to be fine when the PDF is viewed on a normal viewer. Attached is the image of the issue.

Below is the HTML used

<table>
	<tr>
		<th scope="col">Locavore</th>
		<th>Umami</th>
		<th>Helvetica</th>
		<th>Vegan</th>
	</tr>
	<tr>
		<th scope="row">Fingerstache</th>
		<td>Kale</td>
		<td>Chips</td>
		<td>Keytar</td>
	</tr>
	<tr>
		<th scope="row">Sriracha</th>
		<td>Gluten-free</td>
		<td>Ennui</td>
		<td>Keffiyeh</td>
	</tr>
	<tr>
		<th scope="row">Thundercats</th>
		<td>Jean</td>
		<td>Shorts</td>
		<td>Biodiesel</td>
	</tr>
	<tr>
		<th scope="row">Terry</th>
		<td>Richardson</td>
		<td>Swag</td>
		<td>Blog</td>
	</tr>
</table>

[astefanutti]

Thanks a lot for the detailed use case. I’ve been able to reproduce.

It seems it is caused by the linear gradient background in your styles:

.slide table tr:not(:last-of-type) > * {
   background: -webkit-linear-gradient(
      bottom,
      #bdbdbd .055em,
      transparent .055em
    )
    repeat-x;
  background: linear-gradient(to top, #bdbdbd .055em, transparent .055em)
    repeat-x; 
}

Removing it makes the presentation exporting fine.

Linear gradient rendering in PDF is still problematic in PhantomJS and already affects DeckTape (#61).

Let me know if that’s acceptable to change the background style as a work-around solution.

[astefanutti]

I’m glad it works for you!