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