Pinch-zoom gesture is buggy on off-canvas modal with contact form 7 form

Support
#1

I am using an off-canvas modal with a Contact Form 7 form. On mobile, if a user opens the modal and then tries to pinch-zoom on the form, it is very buggy and it is almost impossible to successfully zoom in on the form. I can’t figure out why, or how to improve the mobile user experience.

I’ve tried setting the modal to prevent and allow body scrolling, but this setting does not make any difference.

You can see the modal on any page of this website: pinnacle-exp.com

To access the modal, scroll to the bottom of any page and click the Talk To Us button.

Any help would be much appreciated. Again, this is a mobile/touch device usability issue. Thank you.

#2

Hello, @adaptifyDesigns,

Thanks for writing to us.

In order to help you with your concern, we need to check your settings. I would request you, please share your details in a secure note. Please provide the following details meanwhile you must troubleshoot common issue before we investigate your settings.

  • WordPress Login URL
  • Admin level username and password

You can find the Secure Note button at the bottom of your posts

secure-note
secure-note1040×250 15.3 KB

Thanks

#3

See below for login details. This is a staging site which is an exact copy of the current live site…

Please view the site on an ios mobile device (like an iPhone) to experience the pinch-zoom issue, and follow the instructions in the original post to access the modal contact form. Thanks!

#4

Hello @adaptifyDesigns,

I do not have an iPhone. I have tested your site on my android phone and this is how it behaves.

I have forwarded this to our other staffs so that they can help and check your site on their iPhone.

Thanks for your understanding.

#5

I’ve made a video of what it’s like on an iphone (ios Safari). Sorry, I don’t know how to get the two white dots to show where my fingers are, but you can clearly see the buggy behavior when trying to pinch-zoom in and out. It is possible to do so, but very difficult and disorienting. I’ve search all over the internet trying to find something about this, but I haven’t found anything helpful.

I would definitely appreciate if one of your colleagues could confirm this behavior on ios, and especially if someone on your team might have an idea of how to address this issue.

I should also add that the pinch-zoom gesture works as expected on the rest of the website. It’s only the modal form with the contact form in it that has this behavior. See video below, using Chrome on ios. You can see that pinch-zoom works fine on the main page, and also works fine on the modal off-canvas menu.

Any ideas??

#6

Hey @adaptifyDesigns,

I will clarify this case with our development team if pinch-zoom is supported. I believe that pinch-zoom isn’t necessary if your mobile responsive design is good enough so that your website users won’t need to zoom in anymore.

I’ll post this in our issue tracker so this will be queued to be checked by our development team. Please kindly wait in case there would be feedback. Just note that we don’t have a timeline as to when this will be checked. But, rest assured this will reach our development team’s attention.

Thanks.

#8

Ok, thanks Christian. I do want to clarify a couple of things.

  1. I don’t think this is an issue of whether or not the pinch-zoom gesture is supported by X/Cornerstone. The pinch-zoom gesture on ios seems to be working fine everywhere else on the website, including within off-canvas modal elements. I’m just looking for some assistance troubleshooting why the pinch-zoom gesture is so buggy and inconsistent in the specific off-canvas modal which contains the Contact Form 7 element. It’s like there is something about the embedded form, or the form fields that interferes with a good pinch-zoom user experience on ios.

  2. Take a look at my website on mobile and tell me if you think my design is good enough. I believe it is very well designed for the mobile experience. But mobile users, especially on phones, are very accustomed to using their fingers to pinch-zoom in and out. It has become a fairly normal way to use/experience/explore websites and apps. In the case of my contact form, I don’t think there is any reason to zoom in on the form, because it’s plenty large enough to see and use, but rather than disabling pinch-zoom to avoid users encountering a buggy user experience, I would rather figure out why it is buggy and fix it, so that it accommodates anyone, whether they try to pinch-zoom or not.

Thanks!

#9

Hey @adaptifyDesigns,

I’m not saying your design is not good. What I said is a rule of thumb so that users won’t have to pinch-zoom which is an action to take usually if things are small on the screen.

Please kindly wait for our development team’s investigation on this.

Thank you.

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.