CSS3 transition creates gaps and overlap in fluid width designs

Question

I've run into a problem when using CSS3 transition on fluid-width layouts, particularly when the columns of the layout have no gaps between them.

http://jsfiddle.net/Zm4fW/2/

HTML

<div class="with-gaps">
   <a href="#" class="quarter"></a>
   <a href="#" class="quarter"></a>
   <a href="#" class="quarter"></a>
   <a href="#" class="quarter"></a>
</div>

CSS

.quarter{
   display:block; 
   width:25%;
   float:left;
   background:#111;
   opacity:0.7;
   height:200px;
   transition:0.3s opacity;
  -webkit-transition:0.3s opacity;
}

.quarter:hover{
   opacity:1
}

I'm creating a page with a portfolio of images. When adding a transition to the page, it does not matter what kind of transition, there is some kind of rounding weirdness going on. The boxes round their widths incorrectly when hovered and create overlap and gaps. When there is no transition, as in the example, this rounding does not happen.

I have looked into backface visibility, but all that does is show the problem always instead of during the transition.

If you cannot see the problem, resize your browser window and note the imperfections in the widths of the first row of boxes when hovering the anchor elements.

Any way to fix this?

Answer 1

You can set display: table on the outer divs, then use display: table-cell on the inner elements. This gets rid of that white/black line flickering: demo

You may need to refactor your code if you need to flow the images to multiple lines when the browser is at different sizes.