Chrome 91 更新破坏了所有表格视图

Question

我从事网络开发已有几年了，从未有过 Chrome 更新破坏我的应用程序。 Chrome build Version 91.0.4472.101 (Official Build) (x86_64) 在我度假时打破了 Windows 和 Mac 用户的所有表格布局。中断与在表格列上设置width 有关。作为临时解决方法，我必须更改所有应用程序中所有表的width 设置，以停止使用px 或vw 用于width 用于表列。为了解决这个问题，我必须让他们都使用% Like width: 15%;。否则，视图的标题列与数据不对齐，或者在某些情况下，整列数据不会显示在页面上。问题仅在 Chrome 中....在 Firefox 和 MS Edge 中一切正常。

我更熟悉我或我的团队错误地将重大变更推向生产。这是我第一次看到稳定的 web 应用程序由于 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
}

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

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

Answer 1

您的问题与 Chrome 91 (TablesNG) 中表格渲染的重写有关：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 后遇到这个问题。不确定这是否能回答这个确切的问题，但如果你来到这里，我的表格容器嵌套在一个设置 {display flex; flex 1;} 在包装我的 {display: table} div 容器的 div 上。只需在 devTools 和繁荣中取消选择显示 flex，表格就恢复正常。不确定 Chrome 做了什么来实现这一点，但它解决了我们的问题。