Blink Bug if you fast hover on Metro JS (Jquery)

601 Views Asked by At

I´m using Metro JS (http://www.drewgreenwell.com/projects/metrojs), to create a Jquery flip wall and everything works ok if I hover the tiles at a "normal" speed, if I hover tiles faster a little bug that flashes the front side image appear, right before finish the flip.

This is one of the problems hard to explain using words, but let me try again.

Metro JS "Flip" divs on HoverIn and Flip the Tile back again if the user HoverOut. If you move your mouse fast over the tiles the script Flip the tile to the back-side face, then flashes the front-side image right before flip back again. I´ve tried to change ZIndex Values, use Css Opacity tricks and everything i could imagine but i can´t remove this image flash.

I talked to the Metro JS developer (Drew Greenwell), really nice guy who always answer users questions, but i understand that he can´t help everybody all the time, so i uploaded my code for you guys reproduce the error and maybe help me with that.

Link: http://www.drewgreenwell.com/projects/metrojs#liveTileBasicExample

Any help is appreciated!

1

There are 1 best solutions below

1
On BEST ANSWER

The issue appears to have been caused by the mouseout timeout firing too fast for the css reset to be applied (essentially before the flip could fully complete). I updated the code on my website and plan to release version 0.9b with this fix included shortly. Thanks for bringing this to my attention! Drew