UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.63 Safari/537.36

Example URL:
http://codepen.io/monfera/pen/NrPmNe?editors=1000

Steps to reproduce the problem:
1. Load the codepen
2. Observe that only 3 lines and 1 rectangle show up
3. Alter by one pixel where the x or y dimensions equal exactly; missing line shows up

What is the expected behavior?
The lines should NOT disappear just because they are prefectly horizontal or vertical.

What went wrong?
The lines disappear when they are parallel with one of the axes.

Does it occur on multiple sites: N/A

Is it a problem with a plugin? No 

Did this work before? N/A 

Does this work in other browsers? No Safari 9.1.1 (11601.6.17)

Chrome version: 51.0.2704.63  Channel: stable
OS Version: OS X 10.11.5
Flash Version: Shockwave Flash 21.0 r0

<svg width="300" height="300" viewBox="0 0 300 300"
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink" >
  <defs>
    <linearGradient id="testGradient">
      <stop offset="20%" stop-color="green"/>
      <stop offset="80%" stop-color="blue"/>
    </linearGradient>
  </defs>
  <path d="M 10 100 L 290 100" stroke="url(#testGradient)" stroke-width="3" fill="none" />
  <path d="M 10 200 L 290 201" stroke="url(#testGradient)" stroke-width="3" fill="none" />
  <path d="M 100 10 L 100 290" stroke="url(#testGradient)" stroke-width="3" fill="none" />
  <path d="M 100 10 L 101 290" stroke="url(#testGradient)" stroke-width="3" fill="none" />
  <line x1="150" y1="10" x2="150" y2="290" stroke="url(#testGradient)" stroke-width="3" />
  <polyline points="10,150 290,150" stroke="url(#testGradient)" stroke-width="3" />
  <polyline points="10,160 290,160" stroke="green" stroke-width="3" />
  <rect x="120" y="30" width="30" height="20" fill='url(#testGradient)'>
</svg>