Hover bug in Google Chrome with jQuery in Windows 8
in Getting Started
•
8 years ago
I've got a problem with a dropdown menu using simple click and hover jQuery functions to make it drop down and close. I wasn't sure where to post this since it seems to be a bug. What's strange about it is that there's a problem with the hover function in Windows 8 (not 8.1 as far as I know) and Windows 10 when using the latest version of Chrome (41.0.2272.89). Same Chrome version works great in Windows 7, OSX, etc. The dropdown item contains of a clickable div container with a span text inside of it and it's almost as if exiting the span is considered exiting the container in Windows 8/10.
Here's what's needed to set it off:
- Open a fresh Chrome browser (latest version) in Windows 8/10 (not 8.1).
- Visit http://variousskies.com/test.html.
- Click right beneath one of the spans and drag the mouse down in the dropdown. Works as expected. Close it by clicking the link or drag the pointer outside it.
- Click on the span itself and try doing the same thing. It should now close the dropdown once the span is exited.
- Alter the viewport of the browser (this is why you need a fresh browser) by resizing the browser or open the developer toolbar.
- Repeat step 4 and now also this should work as expected.
I've tried to duplicate this error in jsFiddle and CodePen but since the viewport needs to be unaltered from page load this is impossible. I've tried stripping down the code and CSS as much as possible though so feel free to copy it and mess around with it. These are the jQuery functions used:
- $('.dropDownMenuContainer').mouseleave(function () {
- var ul = $('ul', this);
-
- ul.stop().slideUp(300);
- //...
- });
-
- $('.dropDownMenuContainer').click(function () {
- var dd = $('ul', this);
-
- if (dd.is(":visible")) {
- dd.slideUp(300, function () {
- //...
- });
- }
-
- else {
- //...
- dd.slideDown(300);
- }
- });
What do you think might be causing this? I can't get this error in other operating systems or browsers. Also, do you have any jQuery solution that will do the same thing but work around this bug?