Chrome 91 次更新中断了所有 table 次观看

Question

我从事 Web 开发已有几年了，从来没有 Chrome 更新破坏我的应用程序。 Chrome 构建 Version 91.0.4472.101 (Official Build) (x86_64) 在我休假期间为 Windows 和 Mac 用户破坏了每个 table 布局。中断与在 table 列上设置 width 有关。作为临时解决方法，我不得不更改所有应用程序中所有 table 的 width 设置，以停止对 width 使用 px 或 vw，对 [=47] =] 列。为了解决我不得不让他们都使用 % Like width: 15%;。否则视图有 header 列未与数据对齐，或者在某些情况下整个数据列不会显示在页面上。问题仅在 Chrome 中。...在 Firefox 和 MS Edge 中一切仍然正常。

我更熟悉我或我的团队错误地将重大变更推向生产的情况。这是我第一次看到生产中断的 stable 网络应用程序因为 chrome 中的更改。我怎样才能防止将来发生此类灾难？.....或者这是我无法采取任何措施来阻止的事情吗？

我精简了一个应用程序，只留下足够的代码来展示一个例子。在 example repo、运行 npm install && npm run serve 然后打开浏览器到 localhost:8080 然后在 src/views/Table.vue

中查看第 23 行的文本

.item-table .example-class {
  width: 4vw; // worked great for years, stopped working after chrome 91.0.4472.101
  // width: 150px; // worked great for years, stopped working after chrome 91.0.4472.101
  // width: 4%; // only thing that seems to work now
}

所有其他相关 table 样式在 src/assets/css/table.scss

中

请注意，我没有使用它，但 datatables users 遇到了类似的问题。

Answer 1

您的问题与 Chrome 91 (TablesNG) 中 table 渲染的重写有关：https://developer.chrome.com/blog/tablesng/

如果我转到 chrome://flags 搜索 TableNG 并将其禁用，您的测试页会正确显示。

报告了一些错误：https://bugs.chromium.org/p/chromium/issues/list?q=TablesNG&can=2您可以尝试自己记录一个错误。

至于将来如何阻止这种情况发生，我怀疑如果浏览器的一部分被重写并改变其行为，你能否做到。

Answer 2

在公司从 88 升级到 91 后遇到这个问题。不确定这是否回答了这个确切的问题，但如果你通过这里，我的 table 容器嵌套在设置 {display flex ; flex 1;} 在 div 包装我的 {display: table} div 容器。刚刚在 devTools 和 boom 中取消选择 display flex，Table 恢复正常。不确定 Chrome 做了什么来实现这一点，但它解决了我们的问题。

Chrome 91 次更新中断了所有 table 次观看

Chrome 91 update broke all table views

google-chrome

html-table