Javascript 重新加载时Safari offsetWidth错误

在过去的几周里，我一直在一个网站上工作，这个网站现在已经上线了。可以在这里看到：

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

这是正确的。每行文字的第一个单词都应加下划线。线的悬停会产生以下样式：

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

下划线太宽了！我已经记录了网络间隔，它们完全错了。这是我用来检索宽度的代码：

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中体验到这种行为。我不知道出了什么问题，所以我希望有人能帮助我。提前谢谢

---

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

我已经查看了页面，html和其他javascript和css太复杂了，如果不在您的问题中发布，就不能“视为理所当然”。我也看不懂你截图中的文字。我已将图片链接添加到帖子中。如果您需要更多的代码，请告诉我。@DavidWorldpeace您找到了吗？我遇到了类似的问题。@StephenWatkins不，我没有。也找不到其他有这个问题的人。@DavidWorldpeace疯狂。我最终使用了MutationObserver：/