Gap between marks on discrete scales if the chart size is not an even multiple of the number of steps

[joelostblom]

Bug Description

By default, rect marks are flush against each other:

Open the Chart in the Vega Editor

However, when setting an explicit width or height for the chart, there are white lines appearing between the marks, which takeaway from the appearance:

Open the Chart in the Vega Editor

I believe this is an issue with how the width and height of the mark itself is computed based on the overall chart width and height. This seems to be supported by the fact that if the chart width and height is set using "step" (e.g. `"height": {"step": 30}, "width": {"step": 30}), then the marks are flush against each other again:

---

I looked into the Vega spec, and it seems like that when height is set specifically, the y-range need to be an even multiple of step size for the white lines to not show up:

    {
      "name": "y",
      "type": "band",
      "domain": {"data": "data_0", "field": "y", "sort": true},
      "range": [0, {"signal": "height"}],  // The max here needs to be an even multiple of the number of steps
      "paddingInner": 0,
      "paddingOuter": 0
    },

In the example above, there are 7 steps, so heights such as 154, 161, 168 all work well. As soon as I try a number when is not an even multiple of 7, the 1 pixel white lines show up. I know this line is one pixel because the value of "encode": { "update": { "height": is {"signal": "max(0.25, bandwidth('y'))"} and if I manually change that to 1 + bandwidth('y'), then the white lines are gone again.

So it seems like two possible solutions could be:

1. Add one pixel to the mark's width/height when the chart's width/height is not an even multiple of the step size.
2. Snap the height/width to an even multiple of step size (probably less desired as it would be more surprising to not get the exact width specified).

Does (1) seem like a reasonable approach or is there another desired way to solve this?

[joelostblom]

Hmm, I think there is some additional complication here. When I try the spec above in Firefox (on top in the screenshot below), the white lines do not show up, but in Chromium they do:

Does anyone have an idea why this might happen?

[PBI-David]

Additional point of interest: on FF, they show up on the canvas renderer but not on the SVG one.