@media print doesn't override main style

Question

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;
    }
}

I'm using Chrome 40.

Answer 1

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?