title: Cannot change width of element for print media
body: <p>Assume two columns positioned side by side in the screen media. Both columns have <code>transition: width .1s;</code> (any delay can fit). Now the task is to change their width for print media. As of Google Chrome v35 I had to use workarounds to make it possible.</p>
  
  <p>Let me show you an example (you can check live example instead: <a href="http://jsbin.com/faxow" rel="nofollow">http://jsbin.com/faxow</a> )</p>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>&lt;div class="column eight"&gt;Lorem ipsum&lt;/div&gt;
  &lt;div class="column four"&gt;Lorem ipsum&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>.column { float: left; transition: width .1s; }
  
  .eight { width: 66.66667%; }
  .four { width: 33.33333%; }
  
  @media print {
    .eight, .four { width: 100%; }
  }
  </code></pre>
  
  <p>This will not apply <code>width: 100%</code> to columns in print media in Google Chrome (at least v35) unless I either:</p>
  
  <ul>
  <li>move <code>transition: width .1s</code> to <code>@media screen {}</code> scope</li>
  <li>get rid of <code>transition: width .1s</code> entirely</li>
  <li>use an <code>alert()</code> inside <code>window.matchMedia('print')</code> listener with Javascript</li>
  </ul>
  
  <p>Is there a special reason for that? Is it an expected behaviour?</p>