docs : add Opera animation / transform issue. Remove from demos

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

_posts/demos/2010-12-30-filtering.html

@@ -37,8 +37,7 @@ related: filtering
       var $container = $('#container');
 
       $container.isotope({
-        itemSelector : '.element',
+        itemSelector : '.element'
-        animationEngine : $.browser.opera ? 'jquery' : 'best-available'
       });
       
       // filter buttons

_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');

_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.
 

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, scale : 0.001 } : // browsers support CSS transforms, not Opera
-        { opacity : 0 },
+        { opacity : 0 }, // other browsers, including Opera
       visibleStyle : Modernizr.csstransforms && !$.browser.opera ? 
-        { opacity : 1, scale : 1 } :
+        { opacity : 1, scale : 1 } : // browsers support CSS transforms, not Opera
-        { opacity : 1 },
+        { opacity : 1 },  // other browsers, including Opera
       animationEngine : $.browser.opera ? 'jquery' : 'best-available',
       animationOptions: {
         queue: false,