Internet Explorer likes to “jump” the user into position when jQuery’s
.focus() is called within a Zurb 5 dropdown. I don’t like this. Notice in the video below that when the dropdown is positioned at the bottom of the screen, and the user selects a dropdown, their positioning “jumps” up. And then the dropdown disappears (this is a separate unrelated
scroll handler issue).
The jumping behavior seems to only be an issue with IE. Firefox, Safari, and Chrome do not have the weird
.focus() issue. It’s not hard to see that Microsoft is trying to center the user within the
window. Pretty reasonable for some situations, yet it’s not what I want. I desire consistency among IE, Firefox, Safari, and Chrome.
The fix? Simply do not call
.focus(). View the pull request. I added an additional setting named
no_focus defaulting to the current behavior. A developer can optionally override it when declaring the Zurb dropdown in HTML markup:
We can grab a reference to the dropdown’s instance settings inside the
open function like this:
And then decide to avoid the focus:
Hurray! No more jumping. The video below demonstrates the desired behavior:
Browser quirks are still prevalent. Fortunately, Zurb Foundation 5 is still alive, heavily used, and supported by the open-source community.
Disclaimer: I am a Foundation fan, user, and minor open-source contributor. And yes, I work for a company that sells bras.