title: 1px (or less? subpixel?) border on inline SVG in FF25 and IE10, not Chrome
body: <p>I am running into a weird issue when using an inline SVG. I am creating a path in an <code>&lt;svg&gt;</code> element and using <code>top</code> or <code>bottom</code> CSS attributes with <code>relative</code> positioning to superimpose this SVG over a previous element to get a cool "cutout" effect on the section.</p>
  
  <p>This totally works in Chrome, but in <strong>IE10</strong> and <strong>FF25</strong>, I get this 'transparent' border to the right and top of the SVG. I put 'transparent' in quotes because as far as I know it is transparent since it is showing the bright green background that is underneath it. Here's a screenshot pointing to exactly where I'm seeing this (screenshot is from FF25):</p>
  
  <p><img src="https://i.stack.imgur.com/l8fpV.jpg" alt="SVG Border Issue in Firefox 25"></p>
  
  <p>I had originally gotten the separator suggestion from <a href="http://tympanus.net/codrops/2013/10/03/a-collection-of-separator-styles/" rel="noreferrer">Codrops</a>.</p>
  
  <h2><a href="http://ignitepixels.com/sandbox/svg/" rel="noreferrer">Test Page</a></h2>
  
  <p>In this test page, the section with a header of "<strong>SVG Trouble Section</strong>" is the section with the issue.</p>
  
  <p>Is there anyway to aleviate this issue so my technique works fine cross-browser? Or is there a better way to achieve the effect I am going for? Thanks!</p>
  
  <hr>
  
  <p><strong>Update 1:</strong>
  Through a little more testing, I have found that sometimes while scrolling in Firefox, the top phantom 'border' disappears and doesn't return. Even after reloading the page. I'm not sure what is causing this to disappear and it isn't part of the problem, just an anomaly.</p>
  
  <p><strong>Update 2:</strong>
  I've done some additional testing by removing elements to see what may be triggering this and after removing comments, a few sections above the "SVG Trouble Section", and the footer, the border has now moved to the bottom separator. Here's the page without the footer: <a href="http://ignitepixels.com/sandbox/svg/sample.html" rel="noreferrer">http://ignitepixels.com/sandbox/svg/sample.html</a></p>
  
  <p><strong>Update 3:</strong>
  I've created a fiddle in which I replicated the issue. This should make for easier troubleshooting: <a href="http://jsfiddle.net/fmpeyton/NuneR/" rel="noreferrer">http://jsfiddle.net/fmpeyton/NuneR/</a></p>
  
  <p>Since you can't save specific panel sizes in jsfiddle, I've attached a screenshot of the approximate size I was able to reproduce this issue with Firefox 25:
  <img src="https://i.stack.imgur.com/MzwtB.jpg" alt="Fiddle in Firefox 25">
  Possibly related to Update 1, the issue shows/disappears based on the window width as well.</p>