Windows7 Chrome特定设备下Fabric.js Canvas中心虚线异常求助

我最近用Fabric.js做了一个带旋转功能的Canvas元素，整体功能都正常，但遇到了一个奇怪的兼容性问题：仅在Windows7系统的部分Chrome浏览器设备上，会出现一组指向Canvas中心的虚线，并不是所有Win7+Chrome的组合都会触发这个问题。

我已经排查了自己的代码，甚至写了一个极简示例来复现，结果还是遇到了同样的虚线问题，先放一下问题截图：

自定义旋转控件的核心代码 #

我重写了对象的drawControls方法来自定义旋转图标，代码如下：

fabric.loadSVGFromString(svgStr, function(objects, options) { 
  console.log("fabric.loadSVGFromString",svgStr) 
  var obj = fabric.util.groupSVGElements(objects, options); 
  obj.scaleToHeight(70) 
    .scaleToWidth(70) 
    .setTop(_t) 
    .setLeft(_l) 
    .setCoords(); 
  obj.set({
    lockUniScaling: true, 
    shapeType:shapeType, 
    cornerColor:'rgba(71,71,71,1)', 
    cornerSize: 17, 
    cornerStyle : 'circle', 
    transparentCorners: false, 
    borderColor: 'rgba(71,71,71,1)', 
    padding: -1
  }); 
  /*Rotation Icon*/ 
  obj.drawControls = function (ctx) { 
    if (!this.hasControls) {return this;} 
    var wh = this._calculateCurrentDimensions(), 
        width = wh.x, height = wh.y, 
        scaleOffset = this.cornerSize, 
        left = -(width + scaleOffset) / 2, 
        top = -(height + scaleOffset) / 2, 
        methodName = this.transparentCorners ? 'stroke' : 'fill'; 
    ctx.save(); 
    ctx.strokeStyle = ctx.fillStyle = this.cornerColor; 
    if (!this.transparentCorners) { 
      ctx.strokeStyle = this.cornerStrokeColor; 
    } 
    this._setLineDash(ctx, this.cornerDashArray, null); 
    // top-left 
    this._drawControl('tl', ctx, methodName, left, top); 
    // top-right 
    this._drawControl('tr', ctx, methodName, left + width, top); 
    // bottom-left 
    this._drawControl('bl', ctx, methodName, left, top + height); 
    // bottom-right 
    this._drawControl('br', ctx, methodName, left + width, top + height); 
    if (this.hasRotatingPoint) { 
      var rotate = new Image(), rotateLeft, rotateTop; 
      rotate.src = 'content/assets/image/icon_rotate_canvas.png'; 
      rotateLeft = left + width / 2; 
      rotateTop = top - this.rotatingPointOffset; 
      ctx.drawImage(rotate, rotateLeft, rotateTop, 17, 17); 
    } 
    ctx.restore(); 
    return this; 
  } 
  /*Rotation Icon Ends */ 
  canvasWrap.add(obj); 
  canvasWrap.discardActiveObject(); 
  canvasWrap.setActiveObject(obj); 
  canvasWrap.selection = false; 
  canvasWrap.renderAll(); 
}); 

极简复现示例 #

为了排除自定义代码的影响，我写了一个没有自定义控件的极简示例，结果还是出现了同样的虚线问题：

HTML代码

<html> 
<head> 
<title>Page Title</title> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.7.22/fabric.min.js"></script> 
<script src="custom.js"></script> 
</head> 
<body> 
<canvas id="c" width="700px" height="500px" style="outline:1px solid red"></canvas> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="57.08px" height="74.223px" viewBox="0 0 57.08 74.223" enable-background="new 0 0 57.08 74.223" xml:space="preserve"> 
<path d="M6.572,43.413l0.505,7.576l50.003,0.505l-0.505-7.071L6.572,43.413z"/> 
<path d="M7.077,54.02l0.505,7.576l49.498,1.01l-0.505-7.071L7.077,54.02z"/> 
<path d="M7.582,65.131l0.505,8.586l48.993,0.505v-6.566L7.582,65.131z"/> 
</svg> 
</body>

JS代码（custom.js内容）

setTimeout(function(){ 
  var svgEl = document.body.getElementsByTagName('svg')[0]; 
  var serializer = new XMLSerializer(); 
  var svgStr = serializer.serializeToString(svgEl); 
  var canvas = new fabric.Canvas('c'); 
  var path = fabric.loadSVGFromString(svgStr,function(objects, options) { 
    var obj = fabric.util.groupSVGElements(objects, options); 
    obj.set({ left: 0, top: 0 }) 
      .setCoords(); 
    canvas.add(obj).renderAll(); 
  });
}, 0);

我也做了一个简化的在线测试页面来复现这个问题，想问问有没有前辈遇到过类似的兼容性问题？或者有没有什么排查方向可以推荐？

内容的提问来源于stack exchange，提问作者Muthu