Beware of Colored Rectangles on LCDs

When developing Legends.ai, we highly followed the advice of Tufte's The Visual Display of Quantitative Information and optimized for data density. Our designs use stacked bar graphs whenever displaying relative and absolute magnitude, as opposed to more ubiquitous but much less dense pie charts.

After building our frontend, we noticed many things looked misaligned: squares looked like they had random margins, and the bars on our stacked bar charts simply didn't line up. We first thought this was a Chrome rendering error, but it turned out to be much worse: a fundamental problem in the way LCD's display pixels.

Below is a CSS rendition of the problem:

This happens due to the way pixels are implemented on a display.

![(from Wikipedia)][https://upload.wikimedia.org/wikipedia/commons/d/de/Closeup_of_pixels.JPG]

If you don't see anything off, you are probably on a high DPI display. But for my large 1440p display and my friend's Retina Macbook, the problem is very clear.

Many effects occur when altering the shapes and colors. If you put a dark background behind the bar, the offset seems to invert.

Changing the size of the bar doesn't change the magnitude of the offset, since the problem is still only in one pixel.

Orienting the bar vertically seems to still have the same problem, but shifted in a different direction.

With a black background, again the direction is inverted.

The reason this happens is unclear to me. If a pixel consists of parallel strips of color channels, why would a 90 degree turn also have the same problem?

And again, the problem is no more apparent when the figure is enlarged.