jQuery: проблема с разборкой щели для кладки

Question

У меня возникает небольшая, но весьма раздражающая проблема при использовании gutterwidth на макетной макете. Я добавляю содержимое в clearing div (после каждой строки) на функцию щелчка, а затем перезаряжаю кладку, чтобы включить ее в сетку. Небольшая проблема заключается в том, что, когда щелкает div, кажется, что он отрубает право контейнера на секунду или около того, что выглядит как ошибка, изредка он заставляет контейнер спрыгнуть.
Я заметил, что при использовании свойства gutterwidth из jquery и замене его на margin-left и margin-right стили, это решило проблему, но я предпочитаю использовать пропускную способность gutter, поскольку я буду добавлять разные размеры div (включая 100% ширину), чтобы я не хотят никаких пробелов.
Вот jsfiddle демо (посмотреть на правой стороне контейнера, когда DIV нажата): http://jsfiddle.net/SzK5F/5/
JQuery:

$(document).ready(function() { 
    var $container = $('#block-wrap'); 

    $(function(){ 
     $container.imagesLoaded(function(){ 
      $('#block-wrap').masonry({ 
      itemSelector : '.content-block-small, .content-block-big, .listing-item, .preview-listing:not(.excluded)', 
      columnWidth: 3, 
      gutterWidth: 15, 
      isFitWidth: true, 
      isAnimated: true 
      }); 
     }); 
    }); 
}); 


$(document).ready(function() { 

    $(".listing-item").click(function() { 

     $('.listing-properties').hide(); 
     var previewForThis = $(this).nextAll('.preview-listing:first'); 
     var otherPreviews = $(this).siblings('.preview-listing').not(previewForThis); 
     otherPreviews 
      .addClass('excluded') // exclude other previews from masonry layout 
      .hide(); 
     previewForThis 
      .removeClass('excluded') 
      .append($('#property' + $(this).attr('hook')).show()) 
      .hide() 
      .delay(400) 
      .fadeIn("slow"); 
     setTimeout(function(){ 
      $('html, body').animate({ scrollTop: previewForThis.offset().top-20 }, "slow"); 
     }, 500); 
     $('#block-wrap').masonry('reload'); 
    }); 

}); 

Это может быть что-то действительно очевидно, что я пропускаю, или он не может быть в состоянии быть фиксированным вообще при использовании ширины желоба (надеюсь, это может), но это немного раздражает.

Answer 1

Проблема возникает, потому что, когда вы нажимаете на блок для добавления элемента, он применяет элемент css overflow:hidden к id #block-wrap. Если вы добавите overflow:visible!important в стиль css, он преодолеет эту проблему.

Я быстро просмотрел все прикрепленные файлы .js и ваш скрипт, но я не могу найти, где добавляется overflow:hidden ... но css override, о котором я упоминал выше, похоже, не вызывает любые дополнительные проблемы.

Вот fixed fiddle link.

#block-wrap { 
    position: relative; 
    width: 100%; 
    padding-top: 30px; 
    margin: 0 auto; 
    overflow:visible!important; 
}