Flexslider carousel / Fancybox images disappearing

Question

I have a flexslider carousel setup with a link around each image to launch in fancybox with the following code:

<div class="flexslider">
   <ul class="slides">
      <?php foreach( $images as $image ): ?>
         <li>
            <a class="fancybox" href="<?php echo $image['sizes']['large']; ?>" rel="gallery">
               <img src="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
            </a>
         </li>
      <?php endforeach; ?>
   </ul>
</div>

<script type="text/javascript">
   $(window).load(function() {
      $('.flexslider').flexslider({
         animation: "slide",
         animationLoop: true,
         itemWidth: 135,
         itemMargin: 0,
         minItems: 5,
         maxItems: 5,
         directionNav: true,
         controlNav: false,
         slideshow: false
      });
   });
   $("a.fancybox").fancybox({
      helpers : {
         overlay : {
            locked : false
         }
      }
   });
</script>

The lightbox loads correctly and carousel functions fine, but when closing the lightbox in Firefox, all of the list items (or images) get hidden until clicked on again. It works fine in Chrome from what I can tell. Any thoughts?

Answer 1

Fixed by adding the following:

.flexslider .slides li {
    backface-visibility:hidden;
}