It looks like there are two bugs:
- Clicking on the non-menu part of the page doesn't close the menu (which has been broken since at least March)
- Clicking on the hamburger icon doesn't close the menu (which just broke recently)
It looks like bug #1 was caused by https://gerrit.wikimedia.org/r/#/c/188483/ back in February. The change assumes that the 'mobile.startup' module is loaded after '#mw-mf-viewport'
has been added to the page, which isn't always the case. Should be OK to revert this change from the looks of it.
2 is due to https://gerrit.wikimedia.org/r/#/c/207005/11/resources/mobile.mainMenu/MainMenu.js which I thought I flagged to @bmansurov during review. "lose the main menu on page center click regardless of whether the main menu button is clicked or not."
(the result of this is clicking the main menu triggers 2 toggle events due to event bubbling resulting in the menu staying open)
- I think the reason is that there is no ".transparent-shield cloaked-element" on Special:MobileMenu. I wonder why not?
- Hamburger is part of the page center which and is treated as every other part of the page center. Fixing 1 should fix this too. And it's not caused by the patch @Jdlrobson mentions.
The reason the DOM hasn't loaded is because both mobile.special.nearby.scripts and mobile.special.mobileoptions.scripts are set to position:top so they load in the head. This, in turn, is to prevent a flash of unstyled content.
@bmansurov Are you sure? When I put the initialization of 'skin' in an init function that runs on DOM ready, it fixes the problem for me (but causes other problems). Also changing mobile.special.nearby.scripts and mobile.special.mobileoptions.scripts to position:bottom also fixes the problem for me (but causes flash of unstyled content).