CODEWITHSUNDEEP
cssgoogle-chromeprinting
Sergey Lukin
Sergey Lukin

Reputation: 489

Cannot change width of element for print media

Assume two columns positioned side by side in the screen media. Both columns have transition: width .1s; (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.

Let me show you an example (you can check live example instead: http://jsbin.com/faxow )

HTML:

<div class="column eight">Lorem ipsum</div>
<div class="column four">Lorem ipsum</div>

CSS:

.column { float: left; transition: width .1s; }

.eight { width: 66.66667%; }
.four { width: 33.33333%; }

@media print {
  .eight, .four { width: 100%; }
}

This will not apply width: 100% to columns in print media in Google Chrome (at least v35) unless I either:

Is there a special reason for that? Is it an expected behaviour?

Upvotes: 1

Views: 1590

Answers (1)

MeTe-30
MeTe-30

Reputation: 2542

It's because at @media print, browser can't interpret the transition codes.
you can simply solve the problem by adding this: 

@media print {
  * {
    transition: none !important;
    -webkit-transition: none !important;
    -moz-transition: none !important;
  }
}

Upvotes: 3

Related Questions