谷歌浏览器range.getClientRects浏览器或预期行为中的错误？

Question

我正在使用Web Selection API并尝试在Google Chrome中实现多选（类似于使用Ctrl按钮的Firefox多选）。为了实现这一点，我将HTML canvas元素与Selection API和Range API一起使用。这是我的代码：

//Ctrl + A doesn't work yet
that.container.on('mouseup', function (event) {
  var selection = window.getSelection(),
    rects, range;

  //we select nothing, just click on the text
  if (selection.isCollapsed || selection.rangeCount < 1)
    return;

  //highlight selection
  range = selection.getRangeAt(0);
  rects = range.getClientRects();

  for (let i = 0; i < rects.length; i++) {
    let rect = rects[i];
    canvas.drawRect(rect.left, rect.top,
                        rect.width, rect.height, '#a8d1ff');
  }
});
that.container.on('mousedown', function (event) {
  var range = document.createRange(),
    textRange = range.selectNode(that.container[0]),
    rect = range.getBoundingClientRect();
  canvas.clearRect(rect.left, rect.top, rect.width, rect.height)
});

这个想法是允许用户在网页的两个不同区域中选择两个东西。当我们只在一个段落中选择文本时它很有效，但当我们在几个段落之间选择文本时会导致一些意外的行为。 Here是一段简短的视频片段，展示了正在发生的事情。

我正在运行Chromium 50.0.2661.102 Ubuntu 16.04。