Menu above built with this plugin including Mega Menu.

Issue with Close on Page Scroll on iPhones

This topic contains 13 replies, has 2 voices, and was last updated by  Peter Featherstone 2 months, 2 weeks ago.

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #54912 Reply

    Celeste Ray
    Participant

    Hello, I am having an issue with the “Close on Page Scroll” option on iPhones. I have a search form in my mobile menu, and when the user clicks inside the search field, the menu automatically closes. This problem occurs with my regular theme and with the default twenty nineteen theme.

    My guess is that this is happening because iOS has an accessibility feature which zooms in on a form field when it is activated. This behavior causes the page to move slightly, which may trick the plugin into thinking the user has scrolled.

    I don’t recall this behavior happening in the past. My users just began reporting it in the last couple of weeks. I’m not sure if it’s due to a plugin update, or perhaps an iOS update. For now I’ve deactivated Close on Page Scroll, but it would be nice to have the issue resolved so we can reactivate it.

    Thanks for help.

    #54916 Reply

    Hey Celeste,

    I’ve made no changes to my plugin in that regard for months so I don’t expect it to be a change in my plugin.

    As you say it could be the zooming in on the form field. I’m not sure why though as my plugin is listening for clicks outside of the plugin but I’m assuming the search form you are talking about is the one inside my plugin?

    Peter

    #54924 Reply

    Celeste Ray
    Participant

    Hi Peter,

    Thanks for the quick reply! Yes, I’m using the Responsive Menu plugin’s built-in search form. In my testing, I deactivated my theme and all plugins, and the issue still happened with only Twenty Nineteen theme and Responsive Menu Pro active. I also reset all the plugin settings to the default, and the problem still occurred.

    It only seems to happen on iPhone, not iPad. It also doesn’t happen on the Android devices we’ve tested on. All of my testing was done on an iPhone XR with iOS 12.1.4, but the problem has been reported by users on multiple iPhones. There was an iOS update recently, perhaps it started with that?

    #54925 Reply

    Hey Celeste,

    It could be an iPhone update, it’s pretty hard to say as they always can make changes.

    Unfortunately if they have made that change then I’m not sure what I can do. Is it every browser on iPhone that it happens with or just Safari?

    Please advise

    Peter

    #54927 Reply

    Celeste Ray
    Participant

    It’s Safari and Chrome. Those are the only two browsers I tested.

    I’d be curious to know if anyone else is having this problem. I don’t think it is specific to our site since it continues to occur after deactivating theme and plugins, but I would expect others to report the same problem if it is a general iOS issue. Maybe it’s so recent no one else has noticed it yet. :-)

    #54929 Reply

    Hey Celeste,

    Wait I just realised you said Close on Page Scroll not Close on Body Clicks.

    Sorry I was thinking of the other the whole time. I have the Search box on my site but have the Close on Body Click option turned on.

    I could turn on Close on Page Scroll temporarily if you wanted to test on my site with those options enabled?

    It does make more sense that the page would close now however on the auto zooming.

    Peter

    #54930 Reply

    Celeste Ray
    Participant

    Yes I can test it on your site. Let me know when it’s turned on and I’ll check it.

    #54935 Reply

    Hey Celeste,

    I have updated it now. Please let me know

    Peter

    #54936 Reply

    Celeste Ray
    Participant

    Yes, I am having the same issue on your site. When I select the search box, the menu closes.

    #54938 Reply

    Hey Celeste,

    That is interesting. Now I need to find some way of being able to debug this myself.

    I don’t have an iphone so will need to use BrowserStack or some form of emulator and try and see if there is a fix.

    Thanks for pointing this out.

    Peter

    #54944 Reply

    Celeste Ray
    Participant

    Okay, thanks for looking into it. I’ll be happy to test things on my phone if you need me to.

    #55161 Reply

    Hey Celeste,

    I have been playing with this for quite a bit now and I’m stumped as to how to get this to work.

    The zooming triggers a scroll and I can’t seem to find a way around it.

    Apparently inputs won’t zoom if they have at least a font size of 16px so it may be worth trying the below CSS and seeing if it solves it:

    .responsive-menu-pro-search-box {
       font-size 16px !important;
    }

    If not then I am at a bit of a loss.

    Peter

    #55306 Reply

    Celeste Ray
    Participant

    Hi Peter,

    I increased the font size all the way up to 24px, and the problem is still happening.

    I appreciate you looking into it. I know it can be difficult to troubleshoot specific issues like this when you don’t have the device available for testing. We’ll leave Close on Page Scroll deactivated for now. Maybe some fix will appear with future versions of iOS.

    Thanks again for all your help!
    Celeste

    #55310 Reply

    Hey Celeste,

    I’ve been able to debug it and see it happening on BrowserStack but as yet cannot find a way around it as it seems to be the new way iOS deals with inputs which is annoying.

    If I find a fix I will be sure to release it.

    All the best

    Peter

Viewing 14 posts - 1 through 14 (of 14 total)
Reply To: Issue with Close on Page Scroll on iPhones
Your information:





<a href="" title="" rel="" target=""> <blockquote cite=""> <code> <pre> <em> <strong> <del datetime=""> <ul> <ol start=""> <li> <img src="" border="" alt="" height="" width="">

Responsive Menu Title Image
Responsive Menu
No coding knowledge needed