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?

Mouse left click stops working after a while in Chrome on angularjs app

After having browser screen out of focus for a while and working in another window, going back to that screen mouse click event have stopped working and I'm not able to click any <a/> links or trigger any ngClick direcitves.
This doesn't happen on any other site, so my guess it has to do something with my angular app, but the problem is - I cannot 100% replicate the issue and I don't know where to look for the problem.
I'm wondering has anyone else had this same issue and if they have resolved it.
How to make the click event work: Click on any element in developer tools to highlight it and voila, the click works again.
Notes:
Left click / Context menu works
Mouse position events work
Mouse enter/leave events work
<a/> links are not wired with any jQuery or any other event handlers that I know of
Update 1: Cannot seem to replicate this issue in IE11
Browser set-up
Chrome: Version 49.0.2623.112 m
Developer tools always open

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.

Why does my menu bar resort to :hover behavior onload?

I have I'm using the dsmoothmenu jquery plugin to generate a toolbar on the top of my page -- About a month ago, the page started loading (most of the time) with the first item of the menu bar exposed -- as if the user were hovering over the item. I've spent hours trying to figure out what's causing this and haven't made any progress.
I have another page which uses the same exact markup for the menu, and the same dsmoothmenu js/css, but which doesn't exhibit the aforementioned behavior. So I figure it's got somehting to do with perhaps a meta tag, or a style that's being overwritten. By investigating with the inspector, it seems as though the ul#other_cities element is being given display:block by something, which is overriding the default style of display:none, which should be active until the user hovers over the element.
Here's an an example of the problem: http://www.foodtrucksmap.com/la/
And a working example: http://www.foodtrucksmap.com/iphone.html
EDIT: So I've found that the problem will only manifest itself if the mouse is OUTSIDE of the window when the page finishes loaded. If you keep the mouse hovering over the page, the menu bar will not slide down. This along with the fact that it only seems to happen in chrome, leaves me really confused.

I can see your problem in Chrome when I right-click the link and then "Open link in new tab" or " ... new window" which opens the window in the background. This leaves me with this conclusion.
Google's Chrome, for some weird reason, positions a "virtual" pointer at position top:1, left:1 which triggers the script. As soon as we bring in the actual "physical" pointer this position takes over and the problem is gone.
As this seems to be a problem with Chrome we can prevent this only with a little trick. I'd say we give the main div#wrapper some breathing room to the left with a margin? Or maybe something to the top like the second example which works!!!

So far I've been able to find out that the onMouseOver event actually fires when the page is loaded.
Since I don't have direct access to the JS files search for the word 'trigger' in all the file (not the jquery ones) and try to find out if it might be calling that at any point.
I will do more research when I have time.

If Nicklas is correct and hover is for some reason firing onload, try wrapping the js of the hover function in your menu javascript with the following conditional:
if(event.target == this) { //Check if the hover event actually targets the object.
//Hover Code//
}
Hope this helps!

Lightbox close link doesn't work in IE7

While the lightbox example page works fine for me in IE7, I seem to have broken it in my implementation.
I've written a Lightbox plugin for Mango Blog and everything works fine in Firefox. However, in IE7 the "close" button doesn't work. If I'm fast enough to get my cursor into the position that the close button will be placed before it slides into place, the IE status bar shows the "#" link, but clicking or moving the cursor makes the status bar go blank -- and of course nothing happens.
Not that it was that necessary, but I made a quick screencast of the behavior in IE7. Note the cursor not switching to a hand on the close button.
Any ideas how to fix this?

Perhaps you should try to use the actual 2.0.4 version of Lightbox as a base, there seem to be several changes in the DOM code, although nothing like the bug you described is mentioned in the changelog.