bar: avoid line between stacked bars

Because of antialiasing, we produce subpixel artifacts between stacked bars which appear as white lines. This is shown in this Codepen

This has been discussed in this Stack Overflow thread and in https://github.com/plotly/plotly.js/issues/4149. Because bars are rectangles, I wonder if we shouldn’t set shape-rendering="crispEdges" on them 🤔

cc @alexcjohnson

[alexcjohnson]

Should we try to turn crispEdges every time two bars touch?

That would be super tough to figure out

Or should we be more selective, and turn on cripsEdges when things look really bad otherwise?

I might even go the other way: what are the situations when crispEdges looks bad and we need to NOT enable it? Frankly the only one that occurs to me is narrow bars/gaps. If bars - OR the gaps between them - are, for example, somewhere between 2 and 3 px wide, crisp will make some of them 2px and others 3px, which looks junky, particularly if there are gaps. Even worse, if the bars or gaps are between 0 and 1 px, they can alternate between visible and completely gone.

How much of a (perf) penalty do we pay by setting crispEdges?

I’d assume the opposite, crispEdges disables antialiasing, and the extra blending it entails, so should be faster than leaving it off.

Should we try to find alternatives to crispEdges similar to we what currently do here:

Note that that solution fails with CSS transforms that scale the bars. Of course all hell breaks loose if you have a CSS rotation (that’s not a multiple of 90 degrees)…

[alexcjohnson]

Ah right, single, non-stacked bars with gaps are better with crisp off. But in this case, even though it’s just one trace, there’s still self-stacking. Ideal would be if we can figure out when there is self-stacking like this and have that effectively count as barcount > 1 (line 35 ^^) - I think it’d be worth trying this before closing, esp. since we’ve recently changed our algorithms to create more self-stacking - and we have px encouraging that use case.

Too bad browsers don’t have separate x/y crisp modes, that would really be the ideal. One can sort of do this by precisely rounding the bar edges and disabling crispEdges, but that falls apart if the user zooms their browser.