Overlapping Lines - and the edges of those lines - artifacts in rendering.

I've been working an issue where the SVG rendering engines in Firefox 31 and IE 11 (because that's what I have to test against) both render some dark pixels in an area where there should be nothing but white.
This fiddle (http://jsfiddle.net/thomassmailus/aLm6zpe6/ ) renders a dashed red-white line as follows:
Draws a black line, draws a white line right on top of it (same points, same stroke-width) and then draws a dashed red line over the white line (same points, same stroke-width)
The edges of the red and particularly noticeable in the white regions, have a dark (black) edge. It is an artifact of the edge of the rendered area of the black line at the bottom of the stack of 3 lines. However, as the definitions of the lines vary ONLY in color, the black should be completely covered up by the red and white.
I would expect the only rendered pixels would be the white and red. The problem is as the lines get thinner, the dark edge is still there, and then the red/white dashed lines start to look like dark gray lines with hits of red on them.. rather than red/white dashed lines.
Is this a weakness of the SVG standard - or a common error in the painting engines in Firefox and Internet Explorer?
Thomas Smailus
Boeing