Pinch and Zoom in Mobile

  • Resolved carlosalves39

    (@carlosalves39)


    3 years, 9 months ago

    Hi,

    I tried to figure out how to make it work, but i can get the pinch and zoom working on mobile version.

    At the bottom of the page, there is a Logo caroussel, on click on the logo, we display a popup. Inside this popup, there is an image. We would like to allow users to pinch and Zoom on the image.

    Regards,

    Carlos

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter carlosalves39

    (@carlosalves39)

    Hi,

    Anyone ?

    Plugin Contributor Philipp Stracker

    (@strackerphil-1)

    Hi @carlosalves39

    Thanks for reaching out. I can see the problem and after some testing I found the source of the problem:

    When a Popup is opened, a page-scroll-block prevents the page behind the Popup from scrolling. That page-scroll-block also disables zooming in/out while a Popup is visible.

    You can use the following snippet to disable the page-scroll-block. I’ve quickly tested it on a dev site, and it solved the problem for me:

    <script>(function() {
  DiviArea.addAction('show_area', function(area) {
    DiviArea.Core.enableBodyScroll()
  });
})();</script>

    Place this code-snippet inside a Code-Module on the page. You need to add this snippet once only, regardless of how many Popups you use.

    Here is the code with more explanation on how to use it: https://tinyurl.com/yhf8hxbo

    While that snippet is present, you can scroll the page behind an open Popup, and zooming also works.

    Let me know how this works for you ?? Thanks, Philipp

    Thread Starter carlosalves39

    (@carlosalves39)

    Hi,

    Thanks for the reply.
    I didn’t see it earlier my bad.

    I tried your solution but i still have the same problem.

    I followed the instructions from here : https://tinyurl.com/yhf8hxbo
    When you have global code (no Area ID), then you can paste the code into the Theme Builder footer, a .js file in your child-theme, or into the <body> field in Divi | Theme Options | Integrations.

    Any idea on how to make it work ?

    Thanks

    Regards,

    Carlos

    Plugin Contributor Philipp Stracker

    (@strackerphil-1)

    Hi @carlosalves39

    I’ve checked your website again and can see the additional code. For me, the pinch-zoom does now work on tablets and my iPhone in landscape mode.

    But when the phone is in portrait mode, pinch-zooming does not work. I’ve tested the same change on two other websites, and the pinch-zoom did work on the same iPhone in portrait mode.

    It appears, that some other script/plugin on your website intercepts the pinch zoom behavior for portrait mode phones. Here are some steps you can follow to further debug this:

    * Create an empty demo page with only one Popup. Do not add anything else on that page and then open up that page on a phone and see if the Popup works as expected.
    * If it works on that page, then some other element on the “notre-expertise” page interferes with the Popup; maybe the slider.
    * If the Pinch-Zoom does not work on the demo page, then please try to disable some plugins; I’d first disable ALL plugins except Popups for Divi and confirm that pinch-zoom works in that case (as it does for me).

    Also keep in mind that mobile phones have very aggressive caching. You need to make sure to clear the browser cache on your phone and eventual Divi/website caches before a test.

    I hope that some of those details help you find the reason and solve the issue. Please don’t hesitate to reach out again once you found the reason or need more help. If there’s a plugin incompatibility, we might be able to address it in a future update.

    Thanks, Philipp ??

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Pinch and Zoom in Mobile’ is closed to new replies.