From 907bd91d77b72bb5bea6edd410893527a017e07d Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 6 Feb 2012 19:25:22 -0500 Subject: [PATCH 1/2] docs : problems with CSS transforms --- _posts/docs/2010-12-03-options.mdown | 2 +- _posts/docs/2011-12-11-help.mdown | 38 ++++++++++++++++------------ 2 files changed, 23 insertions(+), 17 deletions(-) diff --git a/_posts/docs/2010-12-03-options.mdown b/_posts/docs/2010-12-03-options.mdown index 5458b57..ac01e37 100644 --- a/_posts/docs/2010-12-03-options.mdown +++ b/_posts/docs/2010-12-03-options.mdown @@ -265,7 +265,7 @@ The property name of the method within the `getSortData` option to sort item ele
!$.browser.opera
-Isotope uses CSS3 transform to position item elements, when available in the browser. Setting `transformsEnabled` to false will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with Flash content](help.html#flash). +Isotope uses CSS3 transforms to position item elements, when available in the browser. Setting `transformsEnabled` to false will disable this feature so all browsers use top/left absolute positioning. Useful for [resolving issues with CSS transforms](help.html#css-transforms). Default value is set to false for Opera. See [Help: CSS transforms in Opera](help.html#css_transforms_in_opera). diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index 927a6ba..3828840 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -9,10 +9,10 @@ toc: - { title: Unloaded media, anchor: unloaded_media } - { title: Images, anchor: images } - { title: @font-face fonts, anchor: fontface_fonts } + - { title: Problems with CSS transforms, anchor: css-transforms } - { title: Accessing the instance, anchor: accessing_the_instance } - { title: CSS transforms in Opera, anchor: css_transforms_in_opera } - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting} - - { title: Flash, anchor: flash } - { title: Poor type rendering in WebKit, anchor: poor_type_rendering_in_webkit } - { title: First item breaks Masonry layout, anchor: first_item_breaks_masonry_layout } - { title: Right-to-left layouts, anchor: righttoleft_layouts } @@ -95,6 +95,27 @@ Both Typekit and Google WebFont Loader provide font events to control scripts ba + [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) +## Problems with CSS transforms {: #css-transforms} + +As the browser implementations of CSS tranforms are still a work-in-progress, they can cause buggy behavoir with other types of dynamic content. + +
+ ++ [Flash content in Safari and Firefox](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash), like YouTube or Vimeo videos, Flash ads, or Flash audio players. + +### Disabling transforms + +Set [`transformsEnabled`](options.html#transformsenabled) to `false`. This is an easy step to take when troubleshooting. + +{% highlight javascript %} + +$('#container').isotope({ + // options... + transformsEnabled: false +}); + +{% endhighlight %} + ## Accessing the instance [Similar to jQuery UI](http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained), Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the `'isotope'` namespace. @@ -128,21 +149,6 @@ I recommend against using Infinite Scroll with filtering or sorting. This combin 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](http://dropshado.ws/post/4085720152/css-transforms-breaking-flash). 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](options.html#transformsenabled) to false and removing scale from [visibleStyle](options.html#visiblestyle) and [hiddenStyle](options.html#hiddenstyle) options. - -{% highlight javascript %} - -$('#container').isotope({ - // options... - transformsEnabled: false -}); - -{% endhighlight %} - ## Poor type rendering in WebKit Type rendering may appear poor in WebKit browsers like Chrome and Safari. This is because of Isotope's activation of hardware acceleration. The solution is to add add a matching background to the item elements. See more: [dropshado.ws - Resolving anti-aliasing on WebKit hardware-accelerated elements](http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated). From be89bc751911158105c2b65ab35512c5dbd199f5 Mon Sep 17 00:00:00 2001 From: David DeSandro Date: Mon, 6 Feb 2012 19:31:49 -0500 Subject: [PATCH 2/2] docs : help : getting item position --- _posts/docs/2011-12-11-help.mdown | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/_posts/docs/2011-12-11-help.mdown b/_posts/docs/2011-12-11-help.mdown index 3828840..159e6c2 100644 --- a/_posts/docs/2011-12-11-help.mdown +++ b/_posts/docs/2011-12-11-help.mdown @@ -10,6 +10,7 @@ toc: - { title: Images, anchor: images } - { title: @font-face fonts, anchor: fontface_fonts } - { title: Problems with CSS transforms, anchor: css-transforms } + - { title: Getting item position, anchor: getting_item_position } - { title: Accessing the instance, anchor: accessing_the_instance } - { title: CSS transforms in Opera, anchor: css_transforms_in_opera } - { title: Infinite Scroll with filtering or sorting, anchor: infinite_scroll_with_filtering_or_sorting} @@ -116,6 +117,10 @@ $('#container').isotope({ {% endhighlight %} +## Getting item position + +CSS transforms will break previous patterns for getting the position of an item. See the [`itemPositionDataEnabled`](options.html#itempositiondataenabled) option for a stop-gap. + ## Accessing the instance [Similar to jQuery UI](http://docs.jquery.com/UI_Developer_Guide#Internal_functions_.26_scopes_explained), Isotope stores a instance containing properties, settings and methods with jQuery.data. You can access the instance with the `'isotope'` namespace.