Pixel rendering bug in Chrome 35.0.1916.153

by crnacura

HTML

<!-- 
Pixel rendering bug in Chrome 35.0.1916.153 and Firefox 30.0 (both Mac)
- the perceived width of the two spans should be the same but it's not (in Chrome the scaled box is bigger, in FF it's smaller)
- in Firefox it depends on the viewport width(!) 
-->
<div>
    <span></span>
    <span></span>
</div>

CSS

div {
    width: 100.5px; /* exemplifies a percentage value */
    height: 200px;
    background: red;
}

span {
    display: block;
    width: 200%;
    height: 50%;
    background: blue;
}

span:nth-child(2) {
    width: 100%;
    border-top: 1px solid #000;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transform: scaleX(2);
    transform: scaleX(2);
}