屏幕媒体查询覆盖打印规则（在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媒体查询中运行。我已经向Chromium提交了a bug report，他们承认了这个问题。