Canvas 2d Path 在外部显示器上的 Safari 上呈现不同更糟糕

如何解决Canvas 2d Path 在外部显示器上的 Safari 上呈现不同更糟糕

我已经复制了这个动画 https://codepen.io/FabioG/pen/VmOYJz; 它在我尝试过的所有设备和浏览器（笔记本电脑，即 Retina 屏幕、移动设备、桌面外部显示器、Firefox、Chrome）上运行良好，看起来与 codepen 版本非常相似,和 Safari)，除了在使用 Safari 的外部监视器上，路径的渲染变得非常不稳定和糟糕。请参阅下面的图片（查看全尺寸）。

我可以接受它作为屏幕/浏览器组合问题*shrug*，except(!) 在 Safari 上使用相同的外部显示器时，codepen 的外观和渲染效果同样出色！所以这让我非常确定应该可以使用 Safari 让它在这个显示器上很好地呈现。

有人遇到过这种情况吗？或者任何关于原因/解决方案的想法？

显示器 - 铬：

监视器 - Safari：

如果相关的话，我正在使用 react 和 gatsby。

代码笔代码：

function Properties(){
    this.segments = 8,this.growth = 86,this.step = 0.04,this.rows = 100,this.lineDiff = 0.06,this.curveDiff = 1,this.lineWidth = 1,this.lineColor = '#69cffa',this.bgColor = '#3a3b4a'
}

// Perlin noise function creted by Banksean
// https://gist.github.com/banksean/304522
var ClassicalNoise=function(a){void 0==a&&(a=Math),this.grad3=[[1,1,0],[-1,[1,-1,1],-1],[0,-1]],this.p=[];for(var b=0;b<256;b++)this.p[b]=Math.floor(256*a.random());this.perm=[];for(var b=0;b<512;b++)this.perm[b]=this.p[255&b]};ClassicalNoise.prototype.dot=function(a,b,c,d){return a[0]*b+a[1]*c+a[2]*d},ClassicalNoise.prototype.mix=function(a,c){return(1-c)*a+c*b},ClassicalNoise.prototype.fade=function(a){return a*a*a*(a*(6*a-15)+10)},ClassicalNoise.prototype.noise=function(a,c){var d=Math.floor(a),e=Math.floor(b),f=Math.floor(c);a-=d,b-=e,c-=f,d&=255,e&=255,f&=255;var g=this.perm[d+this.perm[e+this.perm[f]]]%12,h=this.perm[d+this.perm[e+this.perm[f+1]]]%12,i=this.perm[d+this.perm[e+1+this.perm[f]]]%12,j=this.perm[d+this.perm[e+1+this.perm[f+1]]]%12,k=this.perm[d+1+this.perm[e+this.perm[f]]]%12,l=this.perm[d+1+this.perm[e+this.perm[f+1]]]%12,m=this.perm[d+1+this.perm[e+1+this.perm[f]]]%12,n=this.perm[d+1+this.perm[e+1+this.perm[f+1]]]%12,o=this.dot(this.grad3[g],a,c),p=this.dot(this.grad3[k],a-1,q=this.dot(this.grad3[i],b-1,r=this.dot(this.grad3[m],s=this.dot(this.grad3[h],c-1),t=this.dot(this.grad3[l],u=this.dot(this.grad3[j],v=this.dot(this.grad3[n],w=this.fade(a),x=this.fade(b),y=this.fade(c),z=this.mix(o,p,w),A=this.mix(s,t,B=this.mix(q,r,C=this.mix(u,v,D=this.mix(z,B,x),E=this.mix(A,C,F=this.mix(D,E,y);return F};

var canvas,ctx,segmentSize,number,n,prop = new Properties();

$(document).ready(function() {  
    //dat.gui set up
    var gui = new dat.GUI();
    var segmentController = gui.add(prop,'segments',15).step(1); 
    gui.add(prop,'growth',1000);
    gui.add(prop,'step',0.01,1);
    gui.add(prop,'rows',100).step(1);
    gui.add(prop,'lineDiff',0.001,'curveDiff','lineWidth',10);
    gui.addColor(prop,'lineColor');
    gui.addColor(prop,'bgColor');
    this.curveDiff = 1
    canvas = document.getElementById("myCanvas");
    calculateResize();
    ctx = canvas.getContext("2d");
    n = new ClassicalNoise();
    init();
  
    segmentController.onChange(function(){
      calculateResize();
    })
  
    $(window).resize(function(){
      calculateResize();
    });
    
});

function init(){
  number = 0;
  iterate();
}

function calculateResize(){
  canvas.width = $( window ).width();
  canvas.height = $( window ).height();
  segmentSize = distance( 0,canvas.height/2,canvas.width,canvas.height/2) / prop.segments;
}

function iterate(){ 
  clearCanvas();
  for(var i = 1; i <= Math.floor(prop.rows); i++){
    drawCurve(i);
  }
  number += prop.step;
  //requestAnimationFrame(iterate);
  setTimeout(function() {iterate()},50);
}

function drawCurve(row){
  var height = canvas.height/(prop.rows + 1) * row;
  var initialNoise = n.noise(number,row * prop.lineDiff,0);
  var path = 'M0,' + Math.round((height) + (initialNoise * prop.growth));
  ctx.save();
  ctx.strokeStyle = prop.lineColor;
  ctx.lineWidth = prop.lineWidth;
  ctx.beginPath();
  for(var i = 1; i <= prop.segments; i++){
    var noise1 = n.noise(number,i * prop.curveDiff);
    var noise2 = n.noise(number,(i-0.5) * prop.curveDiff);
    path = path + ' S' + Math.round((segmentSize * (i-1)) + segmentSize / 2) + ',' + 
      Math.round((height) + (noise1 * prop.growth)) + ' ' + 
      Math.round(segmentSize * i) + ',' + 
      Math.round((height) + (noise2 * prop.growth));
  };
  //path = path + ' T' + (segmentSize * prop.segments-1) + ',' + height;
  ctx.stroke(new Path2D(path));
    ctx.restore();
}

function clearCanvas(){
  ctx.save();
  ctx.fillStyle = prop.bgColor;
  ctx.fillRect(0,canvas.height);
  ctx.restore();
}

function distance(x1,y1,x2,y2){
  return Math.sqrt( (x2-=x1)*x2 + (y2-=y1)*y2 );
}