Develop Reference

Unexpected execution delay for onclick event on a simple burger menu link in Chrome browser

I am setting up a project using the pure css library, and I want to use their responsive side-menu example (the issue is directly visible on this website).
I just found out the issue occurs in Chrome browser but not in Firefox.
When the viewport width is below 768px, the menu is hidden by default thanks to css media-queries.
Opening the menu using the #menu-link button works as expected, but closing it is delayed by roughly 300ms without any obvious reason in the code. If any console.log is added in the click handler function, it gets displayed after this mysterious 300ms delay. It is like Chrome does not execute the handler before this timing.
Removing the css transitions on the elements does not fix the issue.
Do you know where it comes from, and/or how to make the menu close as soon as the click is triggered? Is this some known issue within Chrome?

IE 10 issue with JQuery, works after selecting different program window and going back

So I have a weird issue in IE 10: I open a JQuery dialog with a drop down and a textbox.
I am opening the dialog in an enter jquery event on the page that opens the dialog window.
My issue does NOT happen when it is the shift event though the code called is the same.
When opened with enter though the drop down list will close as soon as you click it, the mask on the textbox is not showing its graphics and if I select the textbox and press tab the focus keeps snapping back to the textbox.
HOWEVER when I select another program and then IE again, while in the dialog, it starts to work normally again...
When I turned off the mask (jquery.maskedinput-1.3.1.min.js) instead I could not tab away from the drop down list and still could not use clicks on it.
Also without the mask switching to another program and back did not help.
All my code works exactly as it should in FF and Chrome. Also its all normal JQ (Version 1.9.1 and the ui version 1.10.1) except the mask.
Weirdest thing I have seen yet with IE.

Fixed by moving focus to another field before opening the dialog. No idea why.

Bootstrap's dropdowns close in less than a sec after pressing them (Android 4.2.1, stock browser)

There's a problem with Twitter Bootstrap's dropdown menus on mobile. If I use Android's stock browser and click on a menu, it will open and close in less than a sec without me doing anything else. The same thing happens if I press the dropdowns on the official Bootstrap site, so this has nothing to do with my code.
If you want to keep the dropdowns open and fix this, you have to tap them for a little bit longer, smth like 1 second. But obviously I'd like a simple tap to be enough.
Is this normal for Android's stock browser? In Firefox and Opera Mini dropdowns work just fine.
Thanks!
PS: no, I don't have any form inside dropdowns. Only links that work fine in other browsers.

This is an android browser thing. They handle links with dropdowns as both a hover and click. Other browser such as iOS handles menus with dropdowns as just the hover then another click to initiate the link.

How can Watir consistently deal with a javascript dropdown menu?

I am n00b to watir and I'm testing a web app that uses extjs. The app has a main menu with several items that have sub items. One of the main menu items has the same text as one of its submenus. In watir webdriver I have this code:
jobs_menu = d.p(:text => "Jobs")
jobs_menu.when_present.flash
jobs_menu.click
jobs_submenu_item = d.a(:text => "Jobs")
jobs_submenu_item.when_present.flash
jobs_submenu_item.click
This is supposed to flash and click the first menu and cause the submenu to drop. Then it should flash and click the submenu item. I get 3 results in 3 different browsers with this:
Firefox - 1st menu flashes and drops, submenu item flashes, but does not get clicked
Chrome - 1st menu flashes and drops, submenu item flashes and clicks OK - yay!
IE - 1st menu flashes and drops, then it goes away and the submenu item cannot be found with ElementNotVisibleError
Interesting to note for a different menu where the drop down text is different than the submenu text then Firefox and Chrome both work OK. IE still gives the ElementNotVisibleError.
How can I get this to work the same in all 3 browsers?

In some cases the display of menus does not require a click, and can be triggered by mousing over the menu. In that case it might work to try .hover instead of .click to get the menu to appear.
A problem with a lot of these custom controls is that they work differently on different browsers, which means your automation code MAY have to take that into account, this is the downside to custom controls like this and not using basic HTML elements

mobile safari 5 not responding to js events until further acton

So check out http://www.toyota.ca/toyota/en/vehicles/yaris-hatchback/gallery using ios 5/mobile safari 5 or simulator press an image on the scroller at the bottom and a lightbox pops. Try to press the next button, you noticed nothing happens. Now if you zoom in/out or change orientation or scroll the page, the image will change.
The js works because the next/prev will become enabled/disabled as you press them but it does not do the animation part until further action. Why is this? is this common? If you try the same page on ios 4 it will work fine.

Don't use a click() handler, use a mousedown() handler.
Mobile devices have a hard time discerning between a click() and a mousedown().
The necessary change is line 472 in common.js, change
var o=p(f,c.prev).click(function(){b.prev()}),q=p(f,c.next).click(function(){b.next()});
to
var o=p(f,c.prev).mousedown(function(){b.prev()}),q=p(f,c.next).mousedown(function(){b.next()});
Either that, or, for every such navigation button, on creation, use:
$(selector).bind('mousedown',$(selector).data("events").click[0].handler)
$(selector).unbind('click',$(selector).data("events").click[0])
Where selector is the jQuery selector for the particular element.
Or you can just use $(class).off to clear the handler once and for all.