Browse Source

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

pull/14/head
David DeSandro 14 years ago
parent
commit
4135bf3b5c
  1. 3
      _posts/demos/2010-12-29-layout-modes.html
  2. 3
      _posts/demos/2010-12-30-filtering.html
  3. 1
      _posts/demos/2010-12-30-sorting.html
  4. 21
      _posts/docs/2010-12-11-troubleshooting.mdown
  5. 8
      jquery.isotope.js

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

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

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

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

8
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,

Loading…
Cancel
Save