Removing white lines from Highcharts column chart

I have a Highcharts column chart that I am trying to build and it has some random white lines in it that I can't seem to remove. Anyone have any ideas?

JsFiddle: https://jsfiddle.net/LiamFlavelle/cks8otgp/148/

The first white lines appear at an between x values of 1673308800000 and 1673395200000. Each x value is a date and have 86,400,000 ms (i.e. a day) between them, and I can't see any differences around these dates.

// Code block - please ignore, you can't submit a JSFiddle without it

This appears to be a problem with svg rendering in browsers. I get the lines at different positions (or not at all) depending on the svg width, screen resolution, selected interval and possibly the moon phase. That effect is discussed for instance in this SO thread, or this one.

Apparently the best solution is to set shape-rendering: crispEdges (in css or as an attribute). For some reason, this doesn't work here. In the original fiddle you set the css shape-rendering: crispEdges; I tried also to set it as an attribute to individual path elements. No effect.

The other proposed solution is to lengthen the rectangles in the direction of their sequence, the x direction in this case. This makes sense in this context, we can add a safe length, since the next rectangle will overlap the previous one. That is what I did, but this is a very hacky solution - changing the svg elements in a render event handler. Here is just the supplemental part to the original chart options:

let options = {
   chart: {
      events: {
         render(ev){
            const svg = ev.target.renderTo.getElementsByTagName('svg')[0];
            //svg.setAttribute("shape-rendering", "crispEdges"); // not working
            const svgPaths = Array.from(svg.getElementsByTagName('path'));
            svgPaths.forEach(
               svgPath => {
                  //svgPath.setAttribute("shape-rendering", "crispEdges"); // not working
                  let extended = false;
                  const d = svgPath.getAttribute("d"),
                     dMod = d.replaceAll(/A 0 0 [\s\d]+(?=\w)/g, '') // remove zero radii arcs
                        .replaceAll( // add +1 to rectangles length
                           /M (\d+) (\d+) L (\d+)  L  (\d+) L   L  /g,
                           (...match) => {
                              extended = true;
                              const m1 = match[1],
                                 m2 = match[2],
                                 m3 = parseFloat(match[3]) + 1,
                                 m4 = match[4];
                              return `M ${m1} ${m2} L ${m3} ${m2} L ${m3} ${m4} L ${m1} ${m4} L ${m1} ${m2}`;
                           }
                        );
                  if(extended){
                     svgPath.setAttribute("d", dMod);
                  }
               }
            );
         }
      }
   }
}

and this is the forked fiddle with that addition.

Highcharts has a built-in option to control this behaviour. In Highcharts API we can read:

> crisp: boolean
>
> When true, each point or column edge is rounded to its nearest pixel
> in order to render sharp on screen. In some cases, when there are a
> lot of densely packed columns, this leads to visible difference in
> column widths or distance between columns. In these cases, setting
> crisp to false may look better, even though each column is rendered
> blurry. Defaults to true.

As a solution, you can disable crisp:

  plotOptions: {
    ...,
    column: {
      crisp: false,
      ...
    }
  }

Live demo: https://jsfiddle.net/BlackLabel/p21Lho37/

API Reference: https://api.highcharts.com/highcharts/series.column.crisp