@media print doesn’t override main style

In my page I have a left sidebar and a container, container has a margin-left because the sidebar is absolute positioned.

Now for printing I hide the sidebar and restore the margin-left of the container, but the margin is not restored.

These are the styles for my container and sidebar:

#sidebar {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 200px;
}
#container {
  margin-left: 200px;
  padding: 20px;
  transition: margin-left .5s;
}

@media print {
#sidebar { display: none;}
#container {
    margin-left: 0px !important;
    padding: 0px !important;
  }
}

using Chrome 40.


solution

Oddly enough, the issue can be resolved in Chrome by removing the transition within the print media query:

Example Here

@media print {
  #sidebar { display: none;}
  #container {
    margin-left: 0px !important;
    padding: 0px !important;
    transition: none;
  }
}

Without removing the transition, you can reproduce the issue here. Perhaps this is a rendering bug?