同位素過渡'閃存'錯誤（Chrome）

我有一個使用Metafizzy的同位素創建的可過濾網格。同位素過渡'閃存'錯誤（Chrome）

它幾乎可以正常工作，但在轉換過程中內容'閃爍'有一個問題。如果我禁用轉換沒有問題，所以我只能假設問題是轉換本身。

我附上了一個bug的圖像。您可以看到顯示的內容是頁面上各種元素的小故障。

任何意見讚賞！

編輯：這似乎是一個Chrome的具體問題

$(function() { 
    // Init Isotope 
    var $grid = $('.grid').isotope({ 
     itemSelector: '.grid-item', 
     percentPosition: true, 
     transitionDuration: 0.2, 
     masonry: { 
      columnWidth: '.grid-sizer', 
      gutter: '.gutter-sizer' 
     }, 
     hiddenStyle: { opacity: 0 }, 
     visibleStyle: { opacity: 1 } 
    }); 

    // Layout Isotope after each image loads 
    $grid.imagesLoaded().progress(function() { 
     $grid.isotope('layout'); 
    }); 

    // Bind filter li click 
    $('.grid-filter').on('click', 'li', function() { 
     var filterValue = $(this).attr('data-filter'); 
     $grid.isotope({ filter: filterValue }); 
    }); 

    // Add/remove 'current' class on lis 
    $('.grid-filter').each(function(i, filters) { 
     var $filters = $(filters); 
     $filters.on('click', 'li', function() { 
      $filters.find('.current').removeClass('current'); 
      $(this).addClass('current'); 
     }); 
    }); 
});

CSS

.grid { position: relative; } 

.grid-sizer, 
.grid-item { width: calc(50% - 20px); } // 50% - gutter width 

.gutter-sizer { width: 20px; } 

.grid-item { 
    float: left; 
    margin: 0 0 20px 0; 
    display: flex; 
    transition: background 0.4s; /* Prevent double transition jump bug */ 
} 

figure { 
    position: relative; 
    overflow: hidden; 
    box-sizing: border-box; 
    margin: 0; 
    word-wrap: break-word; 
    overflow: hidden; 
}

HTML

<div class="grid"> 
    <div class="grid-sizer"><!-- Required for sizing blocks --></div> 
    <div class="gutter-sizer"><!-- Required for sizing gutter --></div> 
    <a href="#" class="grid-item"> 
     <figure> 
      <img src="" /> 
      <figcaption> 
       Content 
      </figcaption> 
     </figure> 
    </a> 
<div>

來源

2016-03-11 dungey_140

嘗試增加過渡到全部，而不僅僅是特定的屬性（'background' ，'top'和'left'），然後將項目浮動到左側，然後將其設置爲'display：flex;'是沒有意義的。要麼浮動它，要麼使用'display：flex;'。 –

我無法複製你的問題，但想知道這只是在Chrome閃爍的問題，考慮到它只是在鍍鉻？在使用轉換時，有時使用WebKit支持的桌面和移動瀏覽器會出現奇怪的故障或閃爍。您通常可以通過強制硬件加速來解決這個問題，方法是將某些css規則添加到具有轉換的元素的元素或容器中。

例如（你不需要這兩個，只有一個，但通常是這些將工作和對你的項目沒有任何影響視覺）

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0);

來源

2016-03-20 11:58:11 Fox

同位素過渡'閃存'錯誤（Chrome）

回答

相關問題