屏幕媒体查询覆盖打印规则（在 Chrome 中）

Question

看看下面的 CodePen：http://codepen.io/anon/pen/YwYYBN（我删除了代码中不相关的部分）。

CSS 的顶部是几个用于调整幻灯片大小的媒体查询（这些由 Less 自动生成）。这是一个例子：

@media only screen and (min-width: 430px) {
  .slides .slide {
    width: calc( 100% / 1);
  }
}

然后，更进一步，是一个印刷媒体查询，它应该覆盖它，因为我总是希望幻灯片的大小在印刷品上占 50%：

@media print {
  .slides .slide {
    width: calc( 100% / 2);
    color: gold;
  }
}

问题是这个打印查询中的宽度被完全忽略了；打印时它始终使用当前活动的 screen 规则定义的宽度！您可以通过使用不同屏幕尺寸打印 CodePen 来对此进行测试。

据我所知，@media 规则应该有效；规则匹配 print，它也出现在 CSS 后面。我知道它处于活动状态，因为项目确实将颜色更改为 gold。但是宽度没有变化。我什至尝试使其更具体（通过将其指向 body .slides .slide 并在查询中添加 min-width ）无济于事。即使 !important 也不起作用。

谁能告诉我这里发生了什么？

Answer 1

好的，问题是由转换引起的：

.slides .slide {
  -webkit-transition: width 0.6s cubic-bezier(0.6, 0.65, 0.52, 0.97);
  transition: width 0.6s cubic-bezier(0.6, 0.65, 0.52, 0.97);
}

宽度的变化实际上触发了这个转换，它在生成打印视图时冻结了。删除过渡后，一切正常。

但是，此转换不应该运行，因为它在 print 媒体查询中。为此，我已将 a bug report 提交给 Chromium，他们已确认该问题。

屏幕媒体查询覆盖打印规则（在 Chrome 中）

Screen media queries overriding print rules (in Chrome)

css

printing

media-queries