WebGL Lines with dash not rendering as we hoped

plotly.js
1

We are using the WebGL (scattergl) to get performance in our scatter charts but we also render a line. We found that setting the line’s dash to anything but solid seems not to render OK. The following is from firstly the SVG version and the second from WebGL

image

I created a codepen based on the codepen for the Basic Line Plot (https://plotly.com/javascript/line-charts/#basic-line-plot) but with the JS altered as follows.

The codepen I created is here https://codepen.io/naskew/pen/JjxexWm

var count = 500;
var increment = Math.PI / (count - 1);
var x = Array.from({length: count}, (x, i) => 8 * i * increment);
var  y = Array.from(x, (x, i) => Math.sin(x));

var trace1 = {
  x: x,
  y: y,
  type: 'scattergl',
  mode:'lines',
  line: {
    width: 4,
    dash: 'dot'
  }
};

var data = [trace1];

Plotly.newPlot('myDiv', data);

If you change the line type: ‘scattergl’ to just type: ‘scatter’ the curve renders perfectly. We are using version 2.18.2 but I tested this on 2.27.0 and it gives the same result. I wanted to mix scatter and scattergl as a possible solution but the scattergl gets rendered over the scatter which hides the trace we want on top. Is there something I am doing wrong?