diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html index e80aa87..c9a1e93 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -54,8 +54,7 @@ related: layouts cellsByColumn : { columnWidth : 240, rowHeight : 240 - }, - animationEngine : $.browser.opera ? 'jquery' : 'best-available', + } }); {% include layout-change.js %} diff --git a/_posts/demos/2010-12-30-filtering.html b/_posts/demos/2010-12-30-filtering.html index 184b766..ce62f32 100644 --- a/_posts/demos/2010-12-30-filtering.html +++ b/_posts/demos/2010-12-30-filtering.html @@ -37,8 +37,7 @@ related: filtering var $container = $('#container'); $container.isotope({ - itemSelector : '.element', - animationEngine : $.browser.opera ? 'jquery' : 'best-available' + itemSelector : '.element' }); // filter buttons diff --git a/_posts/demos/2010-12-30-sorting.html b/_posts/demos/2010-12-30-sorting.html index 73727d2..61c4c6e 100644 --- a/_posts/demos/2010-12-30-sorting.html +++ b/_posts/demos/2010-12-30-sorting.html @@ -32,7 +32,6 @@ related: sorting $container.isotope({ itemSelector : '.element', - animationEngine : $.browser.opera ? 'jquery' : 'best-available', getSortData : { symbol : function( $elem ) { return $elem.attr('data-symbol'); diff --git a/_posts/docs/2010-12-11-troubleshooting.mdown b/_posts/docs/2010-12-11-troubleshooting.mdown index 1c6169a..713bdb1 100644 --- a/_posts/docs/2010-12-11-troubleshooting.mdown +++ b/_posts/docs/2010-12-11-troubleshooting.mdown @@ -8,6 +8,7 @@ toc: - { 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 } --- @@ -66,4 +67,24 @@ Both Typekit and Google WebFont Loader provide font events to control scripts ba Additionally, you can use the `$(window).load()` pattern above to wait for all content, including @font-face fonts, to load before initializing Isotope. +## 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. diff --git a/jquery.isotope.js b/jquery.isotope.js index 99474ff..f38d87f 100644 --- a/jquery.isotope.js +++ b/jquery.isotope.js @@ -342,11 +342,11 @@ window.Modernizr = window.Modernizr || (function(window,doc,undefined){ itemClass : 'isotope-item', hiddenClass : 'isotope-hidden', hiddenStyle : Modernizr.csstransforms && !$.browser.opera ? - { opacity : 0, scale : 0.001 } : - { opacity : 0 }, + { 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 } : - { opacity : 1 }, + { opacity : 1, scale : 1 } : // browsers support CSS transforms, not Opera + { opacity : 1 }, // other browsers, including Opera animationEngine : $.browser.opera ? 'jquery' : 'best-available', animationOptions: { queue: false,