javascript - 在调整大小期间，Chrome 和 Safari 不会可靠地更新样式(webkit 错误？)

Question

我有一个布局，当我根据其他元素宽度调整大小时，我需要调用一个调整大小函数来调整一堆单个元素的大小。在 Chrome 和 Safari 中，它没有正确更新元素，尽管检查员说一切都很完美。

注意:这不能用 CSS 完成，也不是响应式网页设计。

问题似乎是一些基于 WebKit 的错误被转移到了 Blink 中。它不会发生在 Firefox 或 IE 中，甚至回到 9。它只发生在 Chrome 和 Safari 中。我有这段代码会在窗口调整大小时触发

var els = this.getElements();

$(els.fauxTable).width($(els.contentContainer).outerWidth());

var sizes = [];
$(els.contentContainer).find('[data-id]').first().find('td').each(function(i) {
  sizes.push($(this).outerWidth())
  $(els.fauxHeaderContainer).find('th').eq(i).css('width', $(this).outerWidth());
});
console.log(sizes)

return this;

控制台日志输出正确的值甚至更奇怪，你知道如果你在 Chrome 和 Safari 的检查器中悬停一个元素它会在浏览器窗口中突出显示该元素吗？那个位置和宽度和高度是完美的。如果我在检查器中更改与文本颜色等大小完全无关的内容，它都会按应有的位置卡入到位。

这是调整大小后的一些屏幕截图。您将看到 header 如何不匹配。第二张图片是在更改文本颜色之后，就是这样

有谁知道为什么会发生这种情况或如何解决这个问题？

Answer 1

我想我有办法让它发挥作用。如果我将此添加到返回上方和控制台日志下方的代码中，一切正常

$(els.fauxHeaderContainer).hide().show(0);

我认为这是可行的原因是因为浏览器被迫重绘元素及其所有子元素。