重新加载时的Safari offsetWidth错误

Question

过去几周我一直在创建一个现在正在上线的网站。可以在这里看到：http://www.momkai.com/

这个网站在我测试过的所有浏览器中运行良好，除了一个：Safari。当我在Safari 10.1中打开这个网站并将鼠标悬停在第一段时，这就是我所看到的：

这是对的。每行文字的第一个字应加下划线。悬停线条会产生这种风格：

到目前为止，一切进展顺利。现在我重新加载页面，我看到了：

下划线是广泛的方式！我记录了offsetWidths，它们完全错了。这是我用来检索宽度的代码：

const parentParagraph = this.el.parentNode.parentNode;
let selfIndex;
let siblingUnderlineWidth;

this.underlineWidth = this.el.querySelector('.js-text-block-link-text-highlight').offsetWidth;
this.siblings = [].slice.call(parentParagraph.querySelectorAll('.js-text-block-link-text'));
this.siblingUnderlineWidths = [];

for (let sibling of this.siblings) {
  if (sibling.isSameNode(this.underline)) {
    selfIndex = this.siblings.indexOf(sibling);
  } else {
    siblingUnderlineWidth = sibling.querySelector('.js-text-block-link-text-highlight').offsetWidth;
    console.log(siblingUnderlineWidth);
    this.siblingUnderlineWidths.push(siblingUnderlineWidth);
  }
}

this.siblings.splice(selfIndex, 1);

我还添加了console.log的两个屏幕截图来演示值的差异：

我在桌面上的Safari 10.1和iOS上的Safari中遇到此问题。我不知道出了什么问题所以我希望有人可以帮助我。提前谢谢！

如果需要，我很乐意提供更多代码。