CSS3 3D Transition changes firefox page size on hover - firefox

Question

I am creating a 'bookshelf' which contains books that use a CSS3 transform to rotateY onHover.
My problem is that after a few hovers, the page will resize and become much longer. I am only experiencing this problem in Firefox 12.0.
Example: http://jsfiddle.net/49KQk/
<div id="most-checked-out-books">
<div class="f1_container">
<div class="f1_card">
<div class="book front face">
<img src="books/new/harryPotter1.png" alt="Harry Potter (series)" />
</div>
<div class="back face center">
<em>Harry Potter (series)</em>
<br /><hr />
By: J.K. Rowling
<br /><hr />
Checked Out <b>425</b> Times
<br /><hr />
<i class="icon-share-alt"></i><br />Find in PolyCAT
</div>
</div>
</div> <!-- END CONTAINER -->
<div class="f1_container">
<div class="f1_card">
<div class="book front face">
<img src="books/new/ofMiceAndMen.png" alt="Of Mice and Men" />
</div>
<div class="back face center">
<em>Of Mice and Men</em>
<br /><hr />
By: John Steinbeck
<br /><hr />
Checked Out <b>201</b> Times
<br /><hr />
<i class="icon-share-alt"></i><br />Find in PolyCAT
</div>
</div>
</div> <!-- END CONTAINER -->
</div><!-- END MCO BOOKS -->
CSS
.f1_container {
height: 214px;
margin: 0px auto;
position: relative;
width: 140px;
z-index: 1;
display: inline-block;
padding: 0 13px 9px 13px;
}
.f1_container {
-moz-perspective: 1000px;
-webkit-perspective: 1000px;
-o-perspective: 1000px;
}
.f1_card {
-moz-transform-style: preserve-3d;
-moz-transition: all 0.5s linear 0s;
-webkit-transform-style: preserve-3d;
-webkit-transition: all 0.5s linear 0s;
-o-transform-style: preserve-3d;
-o-transition: all 0.5s linear 0s;
transform-style: preserve-3d;
transition: all 0.5s linear 0s;
height: 214px;
width: 140px;
}
.f1_container:hover .f1_card, .f1_container.hover_effect #f1_card {
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
}
.f1_container:hover .face.back {
visibility: visible\9;
height: 214px\9;
width: 155px\9;
}
.face {
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
position: absolute;
width: 100%;
background-color: blue;
}
.face.back {
-moz-box-sizing: border-box;
-moz-transform: rotateY(180deg);
-webkit-box-sizing: border-box;
-webkit-transform: rotateY(180deg);
-o-box-sizing: border-box;
-o-transform: rotateY(180deg);
box-sizing: border-box;
transform: rotateY(180deg);
background-color: white;
padding-top: 5px;
color: #333;
display: block;
text-align: center;
font-family: "MyriadProRegular", sans-serif;
/* IE HACK */
visibility: hidden\9;
}
.back hr {
width: 50%;
margin-bottom: 10px;
}
.back i {
font-size: 25px;
}
.back a {
font-size: 20px;
text-decoration: none;
}
.back a:visited {
color: blue;
}
.book {
cursor: pointer;
}
.book img {
height: 214px;
width: 140px;
}
You can see after just one or two hovers the entire page resizes and the scrollbar gets smaller. Any ideas how to fix this bug?
Glen