I'm seeing a weird issue in very specific circumstance. I've attached an example file, but basically, if I remove the "position: relative" from the TD the progress bar shows correctly. When the position is present the blue part disappears.

Related style:

.progress-bar {
    float: left;
    width: 0;
    height: 100%;
    font-size: 12px;
    line-height: 20px;
    color: #fff;
    text-align: center;
    background-color: #337ab7;
    -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .15);
    -webkit-transition: width .6s ease;
    -o-transition: width .6s ease;
    transition: width .6s ease
}

Another interesting thing is that if I override "float: left" on the .progress-bar element and set it to "float: none" then it works as well.

It seems like maybe the positioning of that element is being based off the TD instead of div.progress.

Chrome shows it correctly even with the "position: relative" on the TD.

I am specifying --media=screen as well.

Any idea what's going on here?

1. 6dx2rei8-1.pdf.html‎ 0.9 kB