UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:47.0) Gecko/20100101 Firefox/47.0

Example URL:
https://output.jsbin.com/tuhotoseyo

Steps to reproduce the problem:
1. create a div with `background: linear-gradient(rgba(0,100,0,0.3), rgba(100,0,100,0.5), rgba(100,0,0,1));`
2. print to "Save As PDF" with "Background Graphics = on"
3. open the pdf in acrobat viewer (or see it in print preview)

What is the expected behavior?
gradient should not have red line at the top

What went wrong?
see the red line (same as at the bottom of the div) appears at the top

Does it occur on multiple sites: No

Is it a problem with a plugin? No 

Did this work before? No 

Does this work in other browsers? Yes 

Chrome version: 51.0.2704.84 (Official Build) m (64-bit)  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 21.0 r0

the generated pdf gradient is implemented using Pattern with "/PatternType 1", i.e. repeating pattern with cell size strictly equal to the size of the div

looks like there's some rounding issue, so red line appears because first pattern cell ends earlier than the rectangle, so next cell becomes visible
 

Deleted: gradient-3.pdf 27.6 KB

gradient-3.pdf 27.6 KB Download

Deleted: gradient-3.html 660 bytes

gradient-3.html 660 bytes View Download