Weird Responsive image grid FireFox - html

Question

I have a weird problem is firefox (not in google or safari) where you get 1px margin on the sides of the image when you move the window. I don't not if this a bug in firefox or I have just missed something, but it as been really annoying me.
Update: the first problem was fixed with a simple update to firefox, but the problem has came back after adding the transition to change the opacity.
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600);
html,
body,
ul {
padding: 0;
margin: 0;
}
body {
font-family: "Open Sans";
}
ul:after {
content: "";
display: table;
clear: both;
}
li {
position: relative;
display: block;
float: left;
width: 25%;
background-color: pink;
}
li img {
display: block;
width: 100%;
opacity: 1;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
li .text {
position: absolute;
color: white;
left: 0;
top: 60%;
width: 100%;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
-ms-transform: translateY(-100%);
-o-transform: translateY(-100%);
transform: translateY(-100%);
text-align: center;
opacity: 0;
}
li .text h1 {
margin: 0px;
font-weight: 300;
font-size: 20px;
}
li:hover img {
opacity: 0.3;
}
li:hover .text {
opacity: 1;
}
<ul>
<li>
<img src="http://lorempixel.com/200/200/">
<div class="text">
<h1>"Rubber Ducky"</h1>
<small>001</small>
</div>
</li>
<li>
<img src="http://lorempixel.com/200/200/">
<div class="text">
<h1>"Rubber Ducky"</h1>
<small>001</small>
</div>
</li>
<li>
<img src="http://lorempixel.com/200/200/">
<div class="text">
<h1>"Rubber Ducky"</h1>
<small>001</small>
</div>
</li>
<li>
<img src="http://lorempixel.com/200/200/">
<div class="text">
<h1>"Rubber Ducky"</h1>
<small>001</small>
</div>
</li>
</ul>