1px (or less? subpixel?) border on inline SVG in FF25 and IE10, not Chrome

Question

I am running into a weird issue when using an inline SVG. I am creating a path in an <svg> element and using top or bottom CSS attributes with relative positioning to superimpose this SVG over a previous element to get a cool "cutout" effect on the section.

This totally works in Chrome, but in IE10 and FF25, 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):

I had originally gotten the separator suggestion from Codrops.

Test Page

In this test page, the section with a header of "SVG Trouble Section" is the section with the issue.

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!

---

Update 1: 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.

Update 2: 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: http://ignitepixels.com/sandbox/svg/sample.html

Update 3: I've created a fiddle in which I replicated the issue. This should make for easier troubleshooting: http://jsfiddle.net/fmpeyton/NuneR/

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: Possibly related to Update 1, the issue shows/disappears based on the window width as well.

Answer 1

I'm not sure if it is a rounding error or an svg anti-aliasing painting issue, but I have only found the following to work consistently on both Firefox and IE10 in my testing (see example):

Change both SVG paths to this

Note the extra .1 added at two places

<path class="white" d="M0 100 L50 0 L100.1 100 L100.1 0 L0 0 L0 100 Z"></path>

Change the top/bottom offsets of those elements

Change the offsets from -20px to -19.5px

Add this to .separator

    height: 20px;
    overflow: hidden;

What I don't know for sure is just how fragile this solution may be.

Answer 2

Another work-around is to add the following rules to section.green.

border-right: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;