Firefox 13 scale3d w/ image bug

Firefox 13 exhibits a weird bug, where it refuses to scale and position an image-element correctly inside a 3D-scaled container when scaleZ != 1 AND container has no visible decoration applied, e.g. background or border.

by Schepp

HTML

<p>Firefox 13 exhibits a weird bug, where it refuses to scale and position an image-element correctly inside a 3D-scaled container when container is 3D-scaled with a scaleZ != 1 AND container has no visible decoration applied, e.g. background or border.</p>

<p>See how the image is being placed arbitrary to the lower right of the screen when you turn background off. And compare with what Google Chrome does.</p>

<p>Heared reports where this also happens with scale2D (conditions being are a bit different).</p>

<!-- Bug area -->
<div class="hasBackground">
    <img src="http://www.siebennull.com/test.jpg" alt="" width="533" height="800">
</div>
<!-- Bug area -->

<button>toggle background on/off for scaled element</button>

CSS

body {
    padding: 20px;            
    font-family: Calibri, 'Lucida Grande', Arial, Verdana, sans-serif;       
}
p {
    margin: 1em 0;
}
div{
    width: 800px;
    height: 800px;
    -webkit-transform: scale3d(0.5,0.5,0.99);
    -moz-transform: scale3d(0.5,0.5,0.99);
}
.hasBackground {
    background-color: #CCC; /* Needed in Firefox 13 */
}
button {
    position: absolute;
    bottom: 10px;
    left: 10px;
}

JavaScript

back = '#ccc';
$('button').click(function(){
    $('div').toggleClass('hasBackground');
})