html - Very difficult to solve and strange CSS3 opacity transition issue (...must be a bug?)

Question

I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having.

I am using the Bones boilerplate to make a website, and it has been great, until now...

It uses fluid grid system and I have recently tried to create a simple gallery which I have made into a grid (4 images, each one wrapped in a quarter column, with first/last classes added to the first/last images).

If you hover over the images (especially noticeable on the first three for some reason), you will notice that they change width by a pixel or two for some crazy reason. The images are set to max-width:100%, and I have a feeling this is somehow the culprit, because if you give the images a "fixed" width (example .gallery-icon img {max-width:165px;}, it fixes the issue, but being a fluid grid system, I can't go down that route, as the images stay 165px if resizing the browser, and even if I set 4 different widths depending on media, in between media sizes, the images wouldn't align properly.

If it wasn't for the transition effect problem (if i turn the transition off, the images lower opacity fine, but no animation), it would work as I want it to work :(

Please help guys!

Here is a empty demo site that has the bones boilerplate running and nothing more than the gallery on the page. Let me know if you see the shaking issue.

(I couldn't recreate it on jsfiddle, so I installed it on an old domain I had lying around hehe)

EDIT: I have just noticed that the problem seems to happen to images that are bigger than the div in both width and height. Images 1 + 3 are this and they have the bug, whereas images 2,4 seem to be okay? and images 2+4 have a smaller height than the div..... But even if I set the images a max-height, the problem continues..

EDIT2: Added a quick video to show the problem (latest Firefox and Chrome) http://www.youtube.com/watch?v=uL81hLfMvvw

Answer 1

Thanks to vals for pointing out the GPU aspect... This reminded me of this CSS-Snippet which tends to solve Chrome rendering issues:

-webkit-transform: translateZ(0);

I've applied this to the container (div.post) containing the problematic item (i.icon-) which has a fraction width, problem solved!

Credit: I've got this solution from this answer to fix incorrectly rendered (fixed) elements after navigating to an page anchor.