5.7 KiB
Reporting bugs and issues
Report bugs and issues on GitHub.
Guidelines {: #issues-guidelines}
- Look over open and closed issues before submitting yours.
- Add a link to a live site with the bug. If the project is confidential, try re-creating it in jsFiddle.
The issues tracker is for bugs and issues — when Isotope doesn't work as expected. It is not for implementation issues — when you are having trouble setting up Isotope. Consider a Support License for implementation issues. If you're not sure, go ahead and submit an issue.
Support license
If you've tried everything and would really like to get my eyes looking at your code, you can purchase a Support License from Metafizzy.
Support License is included with Isotope Commercial License.
Additional resources
- The Metafizzy blog has posts that cover specialized use cases
- Sites using Isotope
- Miscelleanous Isotope content
- Stack Overflow questions on Isotope
Unloaded media
Most layout modes (i.e masonry, fitRows) need to measure the size of each item to appropriately account for its space in the layout. Unloaded media files like images and @font-face fonts can throw off layout and cause item elements to overlap one another. Ideally, Isotope layouts should be initialized after all inner content has loaded.
Images
Inline dimensions
For images, the best method is to specify the width and height of images inline.
{% highlight html %}
{% endhighlight %}
If you’re using a PHP-based CMS, you can use the getimagesize function.
imagesLoaded plugin
The next best solution is to use the imagesLoaded plugin included with Isotope. It's a fork of Paul Irish's plugin that finds all the images in a context, and fires a callback function once all the images have loaded.
{% highlight javascript %}
$('#container').imagesLoaded( function(){ $(this).isotope({ itemSelector : '.item', }); });
{% endhighlight %}
$(window).load()
Another solution is to initialize Isotope inside $(window).load() instead of $(document).ready(). This will trigger Isotope after all the media on the page has loaded.
{% highlight javascript %}
$(window).load(function(){ $('#container').isotope({ // options... }); });
{% endhighlight %}
@font-face fonts
Both Typekit and Google WebFont Loader provide font events to control scripts based on how fonts are loaded.
CSS transforms in Opera
Currently, using CSS transforms in Opera distorts text rendering. To avoid this issue, I recommend disabling Isotope to use transforms.
Isotope's default options are already set to not use CSS transforms in Opera.
{% highlight javascript %}
// Isotope default options hiddenStyle : Modernizr.csstransforms && !$.browser.opera ? { opacity : 0, scale : 0.001 } : // browsers support CSS transforms, not Opera { opacity : 0 }, // other browsers, including Opera visibleStyle : Modernizr.csstransforms && !$.browser.opera ? { opacity : 1, scale : 1 } : // browsers support CSS transforms, not Opera { opacity : 1 }, // other browsers, including Opera animationEngine : $.browser.opera ? 'jquery' : 'best-available',
{% endhighlight %}
Also note that the recommended transition CSS is missing declarations for Opera.
Infinite Scroll with filtering or sorting
I recommend against using Infinite Scroll with filtering or sorting. This combination produces a unnecessarily complex user interaction that will frustrate your users. New content gets added, but part of it might be hidden. There is no way for the user to tell what gets hidden or re-arranged when Infinite Scroll adds more content. Exercise moderation with your Isotope implementation.
If you do plan on implementing Infinite Scroll with filtering or sorting (which is a bad idea), use the insert method instead of appended.
Flash
Using CSS transforms with Flash content is a bit buggy in Safari and Firefox. This is problematic when using Isotope on item elements that contain Flash content like YouTube or Vimeo videos, Flash ads, or Flash audio players.
The best way to resolve this issue is to disable CSS transforms by setting the transformsEnabled option to false.