Here is a video describing a problem we’re having. We’ve tested this on some of our other sites and we noticed the same problems on them as well.
Hi @alex5252,
Thanks for reaching out.
You mean the active status of the menu button? All I see is the white area and menu button changing the style. Perhaps you can clarify the issue you’re getting?
As for the white background, it’s iOS-specific feature and it can’t be controlled by any script or CSS. And how the menu button should behave? I can’t exactly reproduce it as I’m not sure what part of the screen you tap-scroll it but if you happen to tap and scroll exactly on the menu, then it’s only normal to change its styling (hover and active status).
Thanks!
You mean the active status of the menu button?
I don’t know what you’re referring to here.
All I see is the white area and menu button changing the style. Perhaps you can clarify the issue you’re getting?
The issue is exactly as I said in the video. When you are scrolling and you release your finger the page returns to the top of the browser. However this doesn’t happen immediately. During the time the page returns to the top of the browser and for roughly 1/2 second afterward, when you try tapping the menu button it doesn’t open the mobile main menu. The button receives focus, hence the change in the styles, but the click/touchstart event is not fired.
As for the white background, it’s iOS-specific feature and it can’t be controlled by any script or CSS.
I’m not concerned about the browser’s background color.
And how the menu button should behave?
When I tap on the main menu button the main menu should open.
I can’t exactly reproduce it as I’m not sure what part of the screen you tap-scroll it but if you happen to tap and scroll exactly on the menu, then it’s only normal to change its styling (hover and active status).
Of course it’s normal that when an element should receive focus from the browser, it should be styled by any declarations, whose selectors have the focus pseudo-class, thus causing a change in its appearance. What is not normal is why the menu button doesn’t open when it is tapped during or immediately preceded by scrolling even though the browser recognizes the tap, hence the aforementioned reception of focus and the resultant change of styles.
Hello @alex5252,
Thanks for updating in! Sorry for the confusion. Does this happens when you are logged out? Please log out of you WordPress dashboard and test your site again. If you got the same behaviour, would you mind providing us the url of your site so we can take a closer look at it. It seems that we cannot replicate the issue in our local installations.
Regards.
It does happen when logged out.
Hey Alex,
I’ve tested your site on my phone and I couldn’t replicate the issue as shown in your video (see the screencast in the secure note). Does your video also have a narration? I couldn’t hear your description of the issue.
What browser and operating system you’ve tested this on? Also provide the version numbers.
With regards to tapping the button after you’ve just scrolled to the top, like in my test, the browser reloads thus disrupting the function of the Navigation Collapsed. That is the browser’s feature.
If I’m not understanding the issue correctly, please give us a step by step instruction for us to replicate the issue.
Thanks.
This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.
I’ve reopened the thread now so you can reply regularly.
I’ve tested your site in Android. I personally do not have an iOS device so I’ll forward this to someone who has so he/she could try to replicate the issue in Safari in iPhone.
Would you mind telling us the version number of Safari and your OS also?
Thanks.
Hi Alex,
I’m following up this thread, I’m still confused about the details you provided.
I’ll ask another question for further clarification. Are you expecting for the mobile menu to open while you’re doing the tap-pull-down action on your screen?
A quick and fast tap is equivalent to click, and that’s what opens the menu. While pulling the screen is equivalent to tap-hold (quick or longer) and it triggers the standard HOVER (focus) event that toggles the active status of the menu instead of opening it. And again, these are all normal. It’s not about scrolling or not, it’s about the action you’re performing which the device recognized.
And it’s all because the focus styling use :hover instead of class toggle from javascript. With javascript, you can control the styling depending on what action is performed (perhaps count the tap and perform the class toggle on the second tap, creating an artificial/custom hover effect). But right now, it uses browser’s default action based on CSS, just like a how normal link receives focus status.
And in android, the tap-pull-down (or what we see as scroll) action is equivalent to page refresh.
Thanks!
So apparently for reasons that I cannot understand the video doesn’t play the audio. try downloading the file. I explained everything in the video. This explains why you are so confused and why I was so confused about your confusion.
Hi Alex,
Thanks, I’m able to hear the audio after downloading the video. But I’m still confused, and again sorry for confusion and misunderstanding.
And based on the audio,
Normally, when you click it, it works just fine
However, there is a bit of a problem when you introduce scrolling so by scrolling and try clicking it. It doesn’t work.
Yes, that’s the only way to open the Menu, by clicking or tapping it.
My question is still the same, but I will reword it, are you trying to open the menu while scrolling it (tap and pull-down)? Because it’s not possible. And it’s nothing to do with javascript since the :focus and :hover is applied through CSS.
And clicking/tapping it after the scroll opens the menu without any problem, and I tested it on IOS.
Thanks!
The issue IS NOT that scrolling doesn’t open the menu.
When you scroll by dragging your finger down, if that results in the top of the page to be lower than the top of your screen, then there is a period of time, starting from the moment you release your finger and ending roughly one second after the top of the page returns to the top of the screen where any taps to the Main Menu hamburger menu button are ineffectual.
The issue is why the menu button doesn’t work when there is a scroll, that fulfills the criterion stated above, THAT PRECEDES a tap to the menu.
It isn’t that the scrolling and tap are simultaneous but sequential.
Why when I’m not actively scrolling, does the antecedent scroll prevent the current tap from working correctly.
Hi Alex,
Sorry again for the confusion, I’m just asking if you’re trying to open the menu while scrolling. I’m not saying scrolling is the issue 
And thanks for the clarification, this is what I found (your issue is true) that is if you scroll and pull it down and tap the menu right way. Again, that’s is true and I’m able to reproduce it. But it only happens if you’re doing it too fast (which also based on your video).
But, if you’re going to wait a bit right after it bounces back to the top, and then tap the menu, then it will open okay without any issue.
The reason for that is, the bounce effect is an easing. Please check this https://developers.google.com/web/fundamentals/design-and-ux/animations/the-basics-of-easing
In classic animation, the term for motion that starts slowly and accelerates is “slow in,” and for motion that starts quickly and decelerates is “slow out.”
In the technical side explanation, the system process that is responsible for the bounce animation isn’t done yet even though you already see that it is almost or already reaches the top. The offset 0.5 will almost look 0 offsets, almost done but isn’t.
And you can only perform another action once the first action is done (which is the tap-pull-down-scroll). And it’s only done once the system completes the entire animation process back to 0 offsets. Hence, it creates a bit of delay, like half a second. Try it again by waiting a bit after it touches the top and the menu will open just fine after tapping.
And unfortunately, this is the iOS feature and you can’t override it. It’s part of the device’s system and not the site’s coding.
Thanks!
Ok. That’s the answer I was looking for. We weren’t sure if there was a reason for it or not. Thanks.
You are most welcome!
Happy Holidays!