title: Very difficult to solve and strange CSS3 opacity transition issue (...must be a bug?)
body: <p>I am absolutely tearing all of my hair out with this highly frustrating and strange CSS problem I am having.</p>
  
  <p>I am using the <a href="http://themble.com/bones/" rel="nofollow noreferrer">Bones boilerplate</a> to make a website, and it has been great, until now...</p>
  
  <p>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).</p>
  
  <p>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 <code>max-width:100%</code>, and I have a feeling this is somehow the culprit, because if you give the images a "fixed" width (example <code>.gallery-icon img {max-width:165px;}</code>, 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. </p>
  
  <p>If it wasn't for the <code>transition</code> effect problem (if i turn the <code>transition</code> off, the images lower <code>opacity</code> fine, but no animation), it would work as I want it to work :(</p>
  
  <p>Please help guys!</p>
  
  <p>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.</p>
  
  <p>(I couldn't recreate it on jsfiddle, so I installed it on an old domain I had lying around hehe)</p>
  
  <p>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..</p>
  
  <p>EDIT2: Added a quick video to show the problem (latest Firefox and Chrome) <a href="http://www.youtube.com/watch?v=uL81hLfMvvw" rel="nofollow noreferrer">http://www.youtube.com/watch?v=uL81hLfMvvw</a></p>