javascript - Webkit 错误 : Overflow auto triggered after resizing a child element to matching size

Question

我有以下简单设置:

document.getElementById('inner').addEventListener('click', ({ target }) => {
  target.classList.add('match');
});

#container {
  background: green;
  overflow: auto;
  width: 200px;
  height: 100px;
}

#inner {
  width: 210px;
  height: 110px;
}

#inner.match {
  width: 200px;
  height: 100px;
}

<div id="container">
  <div id="inner"></div>
</div>

单击内部元素后，我希望父元素上的滚动条消失，因为这两个元素现在具有匹配的大小。这在 Firefox 中按预期工作。
然而，容器元素不会在 Chrome 中丢失滚动条，如下面的屏幕截图所示:

滚动条本身会创建一个足够大的偏移量以产生溢出。
这是特定于 webkit 的问题吗？对于这个(看似微不足道的)问题，是否有跨浏览器的可靠解决方案？

我正在寻找一种不会更改父级属性的解决方案，因为我的内容 (#inner) 将放置在我无法控制的 DOM 中。

到目前为止，我已经尝试在不同的执行点隐藏/显示和/或分离/重新插入元素，但问题仍然存在，可能是因为操作被简单地优化掉了。

问题同时出现在 Jsfiddle 和 Stack 片段中。

错误已在 Webkit Bugzilla 上提交.

Answer 1

更新:这个问题似乎在最新版本中得到了修复，不过我还没有跟踪具体是哪个版本。

---

不涉及寻址父级的解决方法是 force a browser redraw应用样式后。

document.getElementById('inner').addEventListener('click', ({ target }) => {
  target.classList.add('match');
  //Force redraw
  target.style.display='none';
  target.offsetHeight; //Won't work without this
  target.style.display='';
});

#container {
  background: green;
  overflow: auto;
  width: 200px;
  height: 100px;
}

#inner {
  width: 210px;
  height: 110px;
}

#inner.match {
  width: 200px;
  height: 100px;
}

<div id="container">
  <div id="inner"></div>
</div>

我不能保证这是一个始终如一的解决方案(请参阅有关针对可能的问题强制重绘的链接线程)，但至少在这种特定情况下，这似乎可以通过我的初始测试。
我已经用 Webkit 提交了一个错误，描述了上述所有行为，但在那之前，这是一个可行的选择。