css - 在 chrome 版本 ~103 发布后，打印网页时出现数百个空白页和/或比例失调(已解决)

Question

即使只有 9 页内容(498 页空白)，也正在打印 507 页

亲爱的社区，在 chrome 的最新版本之一之后，版本 ~103-105 之后的某个地方，打印网页时出现了一个不幸的错误。 它要么打印成百上千张空白页，要么打印出比例扭曲的输出。 此更改适用于所有基于 chromium 的浏览器(Google Chrome、MS Edge...)， 并且尤其出现在带有图表或图形的页面中。

如果其他人遇到此问题 - 原因在于 CSS 属性“position: absolute”。 如果您的代码拥有“position: absolute”，您可能希望根据您的需要将其更改为“fixed”或“relative”。 我的代码需要在 2 个地方更改。 一个需要大量重构，因为更改位置属性迫使我重新计算许多其他元素。 另一个只用了 3 行代码，但要花更长的时间才能找到。 我不得不覆盖“Charts.js”内部 CSS 样式所以我实现了“!重要”标志，就像这样(我的应用程序使用版本 2.9.4):

.chartjs-size-monitor-expand > div {
   position: fixed !important; // cannot stay "absolute"
}

“position: absolute”属性出现在其他 3 个类中，因此如果上述建议还不够——您可能想尝试以下方法(或定位其他包含绝对位置的位置):

.chartjs-size-monitor,
.chartjs-size-monitor-shrink,
.chartjs-size-monitor-expand,
.chartjs-size-monitor-expand > div {
   position: fixed !important; // cannot stay "absolute"
}

希望这对您有所帮助。祝你好运。

Answer 1

同样的问题，也是使用 ChartJS。感谢您发布您的解决方案，它正在为我们工作。注意有一个开放的 Chromium issue关于这个。