Clicking Close button on lightbox makes on mobile mode second click on background element

Support
#1

Hello.

My question is the same as the topic name. Please try here on mobile mode (works similar on device and in chrome developer tools): https://mountforce.ru/product/shilajit-natural-resin/.

  1. Click on “zoom in” element (magnifier icon on product image).
  2. In lightbox (woocommerce) click “Close” button (cross icon in the upper right corner).
  3. The lightbox will close, but the cart modal will open because the cart open button (on header) was under the lightbox close button.

I searched a lot for something similar to my question. Found only this: https://stackoverflow.com/questions/59715546/clicking-close-button-on-image-lightbox-doubleclick-and-force-background-link-to. If I understood correctly, the problem was solved only by installing the separate plugin for lightbox. Is there any other way?

Thank you.

#2

Hello Mount,

Thanks for writing in!

Please be advised that Pro 3.2.2 has some bugs in it. Could you please update to the latest versions? Our latest versions are:

  • Pro theme 3.2.3
  • WordPress core 5.3.2

This latest release contains fixes for several issues so be sure to check out the changelog (http://theme.co/changelog/).

After doing the updates, always remember to clear all caches (if you are using WP Rocket, WP SuperCache or W3 Total Cache) when updating so that the code from the latest release is always in use. This will help you to avoid any potential errors.

Please let us know how it goes.

#3

OK. All updates are installed and caches are cleared. But the problem is still present. It works wrong only on mobile mode. Any ideas? Need help.

#4

My experiments are giving me the following result at the moment.

Adding “stop events” to pswp__button–close ontouchstart attribute solves the problem.

    <button class="pswp__button pswp__button--close" ontouchstart="return false;"></button>

How i can add this without edit in core? It is the next question.

#5

The problem solved. If I understand correctly, the reason was in event bubbling and capturing. Woocommerce lightbox is a div layer with heigh z-index. But touch event on this layer works also for lower layer. It was need to stop event handling. I used for this ontouchstart = “return false;”, which was added to woocommerce/single-product/photoswipe.php.

#6

Glad to hear you got it sorted, @mountforce_ru.

#7

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