Webkit bug:在将子元素大小调整为匹配大小后自动触发溢出

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

不涉及解决父级的解决方法是在应用样式后强制浏览器重绘。

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 提交了一个错误，描述了上述所有行为，但在那之前，这是一个可行的选择。