search

codrops / DirectionAwareHoverEffect

How to create a direction-aware hover effect using CSS3 and jQuery. The idea is to slide in an overlay from the direction we are moving with the mouse.
397 stars 115 forks source link

Enter direction not working properly in Firefox #4

Open ryangiglio opened 10 years ago

ryangiglio commented 10 years ago

I'm using Firefox for Mac 26.0.

The direction that the hover element enters from is not always correct. I've made a gif of the issue:

http://d.pr/i/bOPc

dynamick commented 10 years ago

same problem :-(

zeronull0null commented 10 years ago

You could try using the plugin in my repo: https://github.com/woh4wad/DirectionAwareHoverEffect

I managed to temporally fix this problem, I'm pretty sure there's a better workaround for this, But for now this works fine on FireFox 26

More about this: The problem was, In FireFox, Transition is active and applying even though the "display" property of element is set to "none", By disabling the transition before "mouseenter" event, Resting the hover position and enabling the Transition again, The problem was resolved.

dynamick commented 10 years ago

Great! Now it works perfectly! Well done!

afercia commented 10 years ago

I can confirm there are a couple of errors in this script that prevent correct behavior in Firefox. To be honest seems to me that Firefox behavior is right, I mean it fails because of the errors in the code but Chrome ignores them and does the job. @woh4wad you're right, that's exactly one of the problems, I just cleared the transition properties right after the mouseenter check and before the new starting position is applied, otherwise FF will execute the animation while the element moves to its new starting position and at that moment is not hidden. Will pull a request.

hamdan-mahran commented 9 years ago

Hi woh4wad Thanks for this awesome plugin, i think the problem is still not fixed in firefox but there important note : your demo works good on firefox, so i dont know why my direction is not correct in my example :( i hope to give me feedback Thanks very much