isotope/_posts/docs/2010-12-11-troubleshooting.mdown

---

title: Troubleshooting
category: docs
layout: doc
related: z-etc
toc:
  - { title: Reporting bugs and issues, anchor: reporting_bugs_and_issues }
  - { title: Support license, anchor: support_license }
  - { title: Unloaded media, anchor: unloaded_media }
  - { title: Images, anchor: images }
  - { title: @font-face fonts, anchor: fontface_fonts }
  - { title: CSS transforms in Opera, anchor: css_transforms_in_opera }

---


## Reporting bugs and issues

[Report bugs and issues on GitHub](http://github.com/desandro/isotope/issues). 

### 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](http://jsfiddle.net).

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](http://metafizzy.co/#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](http://metafizzy.co/#support-license).

Support License is included with Isotope Commercial License.

## 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 %}

<img src="img-file.jpg" width="280" height="160" />

{% endhighlight %}

If you’re using a PHP-based CMS, you can use the [getimagesize](http://php.net/manual/en/function.getimagesize.php) 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](https://gist.github.com/268257) 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()`.

{% 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. 

+ [Typekit font events](http://blog.typekit.com/2010/10/18/more-control-with-typekits-font-events/)
+ [Google WebFont Loader: Events](http://code.google.com/apis/webfonts/docs/webfont_loader.html#Events)

## CSS transforms in Opera

Currently, [using CSS transforms in Opera distorts text rendering](http://dropshado.ws/post/1260101028/opera-transform-issues). 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](animating.html#css_transitions) is missing declarations for Opera.