调整大小时Chrome和Safari不能可靠地更新样式（webkit bug？）

Question

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

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

这个问题似乎是一些基于WebKit的bug，已经被转移到了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中的检查器中，它会突出显示浏览器窗口中的元素吗？那个位置，宽度和高度是完美的。如果我在检查器中更改与大小调整完全无关的内容（如文本颜色），则它会按照应有的方式捕捉到位。

这是调整大小后的一些截图。您将看到标头不匹配的方式。第二张照片是在更改文字颜色之后，就是它

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

Answer 1

我认为我有一个黑客可以让它发挥作用。如果我将它添加到返回上方和控制台日志下方的代码中，则一切正常

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

我为什么这样做的假设是因为浏览器被迫重新绘制元素及其所有子元素。