Page MenuHomePhabricator

Hovercards/Popups do not close in browsers without animationend
Closed, ResolvedPublic

Description

In IE 9 (but same concept should apply to any browser without animationend or prefixed equivalent), the hover cards will show fine. However, when you mouse out to leave, it just stays there.

It can't show the animation without CSS3 animation support (http://caniuse.com/#search=animation). However, it should still close.

The solution is probably to use feature detection to determine if animationend exists, and either hide it immediately (or with a simple jQuery fade), or let animationend do its job in supported browsers.

It looks like http://davidwalsh.name/css-animation-callback (from Modernizr) should work (using animation instead of transition), if all browsers with CSS animations support animationend).


Version: master
Severity: major
See Also:
https://bugzilla.wikimedia.org/show_bug.cgi?id=64242

Details

Reference
bz63253

Event Timeline

bzimport raised the priority of this task from to High.Nov 22 2014, 2:56 AM
bzimport added a project: Page-Previews.
bzimport set Reference to bz63253.

Its already set in the CSS how much time it takes for the animation to end. Do you think it makes sense to hide the div after that time duration plus a few milliseconds instead of the animationend event?

I think the animations are a nice to have and its alright if they dont show in browsers without support (thus not use jQuery animations). I'll let Vibha & Jared take this decision and then make necessary changes.

(In reply to Prateek Saxena from comment #1)

Its already set in the CSS how much time it takes for the animation to end.
Do you think it makes sense to hide the div after that time duration plus a
few milliseconds instead of the animationend event?

That seems like it should work cross-browser, if the UX is alright. setTimeout delays can be longer than requested (e.g. if you request a 0.5 timeout, it could really be 0.75 or more in certain cases), but this shouldn't be a problem.

Change 125392 had a related patch set uploaded by Prtksxna:
Replace animiationend with setTimeout

https://gerrit.wikimedia.org/r/125392

Change 125392 merged by jenkins-bot:
Replace animationend with setTimeout

https://gerrit.wikimedia.org/r/125392

Prtksxna raised the priority of this task from High to Needs Triage.Dec 3 2014, 5:29 AM
Prtksxna moved this task from Backlog to Archive on the Page-Previews board.