utrata dolnej granicy na pikselach z wartością szerokości dziesiętnej (tylko firefox) - html, css, html5, css3

Mam obraz w kontenerze div obrazu. Wyrównaj go pionowo i poziomo. Ale kiedy robię to za pomocą transformacji - tracę dolną granicę jednego z moich obrazów i nie jestem pewien, dlaczego.

html:

<div class="imageContainer">
<img class="myImage" src="/images/x">
</div>

css:

.imageContainer {
width: 20px;
max-height: 25px;
height: 25px;
position: relative;
background-color: lightblue;
}

.myImage {
width: auto;
height: auto; /* Set to 9.2px in fiddle example to force the problem. */
max-height: 25px;
max-width: 20px;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

aktualizacja: Powodem tego jest to, że obraz ma rozmiar automatycznywylądować na wartości dziesiętnej. (fx 9.2px), który jest zaokrąglany w dół. Tak jak ja to rozumiem, zawija mój element wysokości 9,2 w obramowanie, a następnie zaokrągla go do 9px, co powoduje zniknięcie dolnej krawędzi. (nawet z overflow: visible)

W każdym razie, aby wymusić automatyczne wartości nie wylądować na wartości dziesiętnej? lub coś podobnego.

przykład skrzypcowy: http://jsfiddle.net/dLLan/24/ (problem występuje tylko w Firefoksie, więc upewnij się, że grasz w Firefoksie.)

Odpowiedzi:

Ponieważ zaktualizowałeś swoje pytanie, oto co zrobiłem:
1. Dodano nowy div (#imgholder) trzymać myImg div.
2. Dodano niestandardowe szerokość i wysokość z 20px i 25px na #imgholder.
3. Zmieniono szerokość i wysokość z #myImage do height: auto; & width: 100%; aby sprawić, by pasowało wygodnie #imgholder.

#imageContainer {
float: left;
position: relative;
background-color: lightblue;
}
#imgholder {
width: 20px;
height: 25px;
}
#myImage {
height: auto;
width: 100%;
border: 1px solid black;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

<div id="imageContainer">
<div id="imgholder">
<img id="myImage" src="/images/http://s7.postimg.org/k8e5116ff/806c278b5a0f77b98f4dcc469f2d0b08.jpg" />
</div>
</div>