Chrome-隐藏的元素以某些格式显示在打印预览中

Question

我已经构建了一个模态组件，该组件具有多个@media print规则以隐藏溢出并将模态后面的页面空白，因此有效地提供了打印预览。下面是通过devtools模拟的带有打印规则的模态的示例图像：

这是Chrome在实际打印预览中显示的内容，除非使用A4 ：

因此，出于某种原因，它决定在模态背景下包括以下@print样式的元素：

@media print {
  .modal-backdrop {
    position: fixed;
    overflow: hidden;
    background: white;
    width: 100vw;
    height: 100vh;
    z-index: 100; /* the index is automatically generated in SCSS and above everything else */
  }
}

我什至将以下样式应用于显示出各种可能性但仍然没有运气的小部件：

@media print {
  .widget {
    display: none;
    opacity: 0;
    visibility: hidden;
  }
}

正如我上面所写，仅在小于A4的纸张格式上发生。没有其他媒体查询会以某种方式使其可见，在打印时务必将它们隐藏在视觉上。
有什么方法可以调试打印预览？据我所知，它仅包含一个用于保存打印预览的chrome插件，因此使用开发工具没有运气...