desandro/isotope — Issue #108: FF drop down listBox menus open at top:0, left:0
Author: asabaylus
Created: 2011-11-09 18:44:02+00:00
State: open

If a list box is added to each item which will be filtered or sorted in isotope then all the box menus will appear in the upper left corner of the page.

Due to a bug in the way Firefox handles -moz-transform: translate. The flyout menu of a dropdown list box will always render at it initial non-transformed location on the screen.

While this bug is a broswer bug and not specifically a bug in isotope. Isotope my work around this issue by setting the absolute position of target elements to equal the current -moz-transformed, translate propertly of the CSS.

EX: If an isotope transformed element has the following css
-moz-transform: translate(300px, 43px);

Then when the transition animation is complete the css animations are disabled on .isotope

-moz-transition-property: none;

Next the position of the target element is updated to match the CSS translate offset and the offset is set to 0,0

''' javascript
$(".items").css({
'position' : 'absolute',
'left' : '300px',
'top' : '300px',
'-moz-transform' : 'matrix(1, 0, 0, 1, 0, 0)'
});

Finally the .isotope CSS transition animation is returned to its original value.

I plan to workaround this issue by setting the animationEngine to 'jquery' which is should resolve the issue.