Hacker News Reader

Comment by eumoria | Hacker News Reader

what's a scenario that this would happen?

Any scenario where the SVG's shapes are rendered with anti-aliasing, and the edges of both overlapping shapes are mid-pixel: the edge of the top shape would be rendered with partial alpha, and then beneath that, the edge of the differently-colored lower shape would bleed through as it is also rendered, at that contiguous line, with partial alpha.

EDIT: You can actually see this very effect in action if you zoom in on the diagonal edges of the yellow and blue faces of the logo on the BBC's page for the EU referendum happening right now: http://www.bbc.com/news/politics/eu_referendum/results - on these anti-aliased diagonal edges (enlarged: http://i.imgur.com/GmxUD60.png), since there's no indentation like the one this SE question highlights, the red shape underneath both of the shapes bleeds through.

Compare the outlines of the shapes with the red shape conterminous beneath them (http://i.imgur.com/Nwyl8YE.png) to the outlines they have when that shape is removed (http://i.imgur.com/iOQmyJx.png).

You can see similar problems even without anti-aliasing. If you have three collinear points A B C, drawing a line from A to B and then B to C may hit slightly different pixels compared to just drawing a single line from A to C. If you try to draw a polygonal mesh which has T-junctions (overlapping edges whose endpoints are not identical) you can end up with slight gaps between adjacent polygons.

In 3 dimensions, a similar phenomenon causes "Z-fighting". https://en.wikipedia.org/wiki/Z-fighting

Note that this is only a problem in some algorithms.

It's explained in the answer on the linked page (and in the top comment). Depending on how it is rendered (due perhaps to a buggy renderer) it might show on a screen.

buggy rendering engine

Reply on news.ycombinator.com