I have a filterable grid created using Isotope by Metafizzy.
It's almost working perfectly but there is an issue with content 'flashing' during transitions. If I disable transitions there is no issue so I can only assume the issue is with the transition itself.
I have attached an image of the bug. You can see that the content being shown is a glitch of various elements on the page.
Any advice appreciated!
EDIT: This appears to be a Chrome specific issue
JS
$( 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> 
2 Answers
Answers 1
I couldn't replicate your problem but wondered if this was just the Chrome flicker issue, considering it is only in chrome? Sometimes there is a weird glitch or flicker with WebKit-powered desktop and mobile browsers when using transitions. You can often fix this by forcing hardware acceleration by adding certain css rules to the element or container of the elements with transitions.
e.g. (you don't need both of these, just one, but typically either of these will work and have no impact on your items visually)
-webkit-backface-visibility: hidden; -webkit-transform: translateZ(0); Answers 2
Hey...
Please, check this code!
See if it' help you. Works perfectly for me: CodePen
Let me know if it's ok.
// external js: isotope.pkgd.js $( document ).ready( function() { // init Isotope var $container = $('.grid').isotope({ itemSelector: '.grid-item', percentPosition: true, masonry: { columnWidth: '.grid-sizer', gutter: '.gutter-sizer' } }); // Bind filter li click $('.grid-filter').on( 'click', 'li', function() { var filterValue = $( this ).attr('data-filter'); $container.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'); }); }); });* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { font-family: sans-serif; } /* ---- grid ---- */ .grid { border: 1px solid #333; } /* clear fix */ .grid:after { content: ''; display: block; clear: both; } /* ---- .grid-item ---- */ .grid-item { position: relative; float: left; margin: 5px; padding: 10px; background: #888; color: #262524; } .grid-item > * { margin: 0; padding: 0; } /* css page */ .grid { position: relative; } .grid-sizer, .grid-item { width: calc(50% - 20px); } .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; box-sizing: border-box; margin: 0; word-wrap: break-word; overflow: hidden; } /* more */ .grid-filter{ float: left; width: 30%; } .content { width: 70%; margin-left: 30%; } ul { list-style: none; padding:0;margin:0; } li { background: #eee; padding:10px;margin:3px; display: block; width: auto; }<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="//mfzy.co/isotope.pkgd.js"></script> <body> <main> <!-- grid filter --> <ul class="grid-filter"> <li class="filter all current" data-filter="*">All</li> <li class="filter observations" data-filter=".observations">Observations</li> <li class="filter qa" data-filter=".qa">Q&A</li> <li class="filter studio-projects" data-filter=".studio-projects">Studio projects</li> <li class="filter other-stuff" data-filter=".other-stuff">Other Stuff</li> </ul> <!-- end grid filter --> <!-- grid content --> <div class="content"> <div class="grid"> <div class="grid-sizer"><!-- Required for sizing blocks --></div> <div class="gutter-sizer"><!-- Required for sizing gutter --></div> <!-- 1 --> <a class="grid-item qa" data-category="qa" href="http://newfuturegraphic.co.uk/qa/post-4-qa-with-unlimited-design"> <figure class="qa"> <img width="1000" height="1000" src="http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/224.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="224" srcset="http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/224-150x150.jpg 150w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/224-300x300.jpg 300w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/224-768x768.jpg 768w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/224.jpg 1000w" sizes="(max-width: 1000px) 100vw, 1000px" /> <figcaption> <h2>Post 4. Q&A with Unlimited Design</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s</p> <span class="meta">By Luke Sully</span> </figcaption> </figure> </a> <!-- 2 --> <a class="grid-item other-stuff" data-category="other-stuff" href="http://newfuturegraphic.co.uk/other-stuff/post-3-radim-malinics-book-of-ideas"> <figure class="other-stuff"> <img width="2000" height="1333" src="http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-TEK-02.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="NFG-TEK-02" srcset="http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-TEK-02-300x200.jpg 300w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-TEK-02-768x512.jpg 768w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-TEK-02-1024x682.jpg 1024w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-TEK-02.jpg 2000w" sizes="(max-width: 2000px) 100vw, 2000px" /> <figcaption> <h2>Post 3. RADIM MALINIC’S ‘BOOK OF IDEAS’</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s.</p> <span class="meta">By Luke Sully</span> </figcaption> </figure> </a> <!-- 3 --> <a class="grid-item other-stuff" data-category="other-stuff" href="http://newfuturegraphic.co.uk/other-stuff/post-1-headline-of-new-article-to-go-here"> <figure class="other-stuff"> <figcaption> <h2>Post 1. Headline of new article to go here</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500sLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s</p> <span class="meta">By Luke Sully</span> </figcaption> </figure> </a> <!-- 4 --> <a class="grid-item observations" data-category="observations" href="http://newfuturegraphic.co.uk/observations/why-random-house-let-us-design-for-them"> <figure class="observations"> <img width="1684" height="1136" src="http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/unlimited3.png" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="unlimited3" srcset="http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/unlimited3-300x202.png 300w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/unlimited3-768x518.png 768w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/unlimited3-1024x691.png 1024w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/03/unlimited3.png 1684w" sizes="(max-width: 1684px) 100vw, 1684px" /> <figcaption> <h2>Why Random House Let Us Design For Them</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s</p> <span class="meta">By Luke Sully</span> </figcaption> </figure> </a> <!-- 5 --> <a class="grid-item studio-projects" data-category="studio-projects" href="http://newfuturegraphic.co.uk/studio-projects/post-2-secret-7-reveals-its-sleeve"> <figure class="studio-projects"> <figcaption> <h2>Post 2. Secret 7” reveals its sleeve</h2> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s</p> <span class="meta">By Luke Sully</span> </figcaption> </figure> </a> <!-- 6 --> <a class="grid-item studio-projects" data-category="studio-projects" href="http://newfuturegraphic.co.uk/studio-projects/test-article-including-all-design-elements"> <figure class="studio-projects"> <img width="2000" height="1333" src="http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-clarks-06.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="NFG-clarks-06" srcset="http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-clarks-06-300x200.jpg 300w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-clarks-06-768x512.jpg 768w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-clarks-06-1024x682.jpg 1024w, http://newfuturegraphic.co.uk/wp-content/uploads/2016/02/NFG-clarks-06.jpg 2000w" sizes="(max-width: 2000px) 100vw, 2000px" /> <figcaption> <h2>Test Article including all design elements</h2> <p>Subheadline of article to go and also along here on two lines should be good.</p> <span class="meta">By Claire Murray</span> </figcaption> </figure> </a> <!-- 7 --> <a class="grid-item observations" data-category="observations" href="http://newfuturegraphic.co.uk/observations/why-are-pr-agencies-so-afraid-of-instagram"> <figure class="observations"> <figcaption> <h2>Why are PR agencies so afraid of instagram?</h2> <p>Why are PR agencies so afraid of instagram? 64% of the top 100 PR agencies in the UK have no Instagram account The average UK top 100 PR agency has just 305.71 followers The top100 UK PR agencies have just 35,071 followers combined Purple PR account for 30.22% of that Only 7% have more than 1k followers 9% have less than 100 followers Intro While researching PR agencies […]</p> <span class="meta">By Claire Murray</span> </figcaption> </figure> </a> </div> </div> <!-- end grid content --> </main> </body>Hope to help you! Good lucky.
Twitter: @devromulobastos
0 comments:
Post a Comment