img flickering on css picture wall - php

Question

im doing this project for university. i'm currently facing a minor problem but yet disturbing.
link to site: http://haw.finekost.com/ws2013/PP_HATE_SITE/
CSS:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
padding-bottom: 20%;
position: relative;
webkit-filter: grayscale(1);
width: 20%;
}
.box:hover {
cursor: pointer;
moz-filter: all .5s ease-in-out;
opacity: 1;
webkit-filter: grayscale(0);
webkit-transition: all .5s ease-in-out;
}
img {
height: 100%;
left: 0;
position: absolute;
width: 100%;
}
the boxes are generated via php.
the image boxes change in size (just 1px) when i hover them. i really dont know why they do it. Hopefully someone can help me

Answer 1

it appears to be related to the webkit transition filter in your .box:hover
Maybe this will help?
Prevent flicker on webkit-transition of webkit-transform
actually if you add -webkit-backface-visibility: hidden; to the box:hover css it appears this will fix the problem.

Answer 2

It is happening due to your webkit-transition style rule setup on your box:hover selector.
If you take it out, then there is no 'flicker'. THe reason it does not happen in Firefox is because you do not have a firefox vendor property set there such as -moz-transition.
Why do you need a transition in this case ?

Answer 3

In your website you use for .box a width of 20%. It looks like this causes somehow a 1px gap. However this could be solved by using width: 20vw for .box.
vw is viewport width in % this removed the 1px border.
So use:
.box {
filter: grayscale(1);
float: left;
height: 0;
margin: 0;
moz-filter: grayscale(1);
ms-filter: grayscale(1);
o-filter: grayscale(1);
opacity: 0.5;
position: relative;
webkit-filter: grayscale(1);
padding-bottom: 20vw;
width: 20vw;
}