屏幕媒體查詢覆蓋打印規則（在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，並且他們承認這個問題。