时间戳

首页 > 解决方案 > Chrome 91 更新破坏了所有表格视图

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

问题描述

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

我更熟悉我或我的团队错误地将重大变更推向生产。这是我第一次看到稳定的 web 应用程序由于 chrome 的变化而中断。我怎样才能在未来防止这种类型的灾难？......或者这是我无法采取任何措施来防止的事情？

我将一个应用程序精简为足够的代码来显示一个示例。在示例 repo中，运行npm install && npm run serve然后打开浏览器以localhost:8080查看第 23 行的文本src/views/Table.vue

.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

在此处输入图像描述

请注意，我没有使用它，但数据表用户遇到了类似的问题。

标签： google-chromehtml-table

解决方案

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

如果我去 chrome://flags 搜索 TableNG 并禁用它，您的测试页面将正确显示。

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

至于将来如何阻止这种情况发生，我怀疑是否可以重写浏览器的一部分并改变其行为。

推荐阅读