[Resolved] Enlarged Photo Problem

[nanoprobes]

I’m having a problem on mobile with the menu. When you enlarge a Woocommerce product image with the magnification icon and go to close it with the X (upper right corner), the main menu automatically opens. It happens on my mobile phone with Chrome.

[Leo]

Hi there,

I just tested your site on my iPhone with Chrome and couldn’t replicate the issue at all.

Do you experience the issue here as well?
https://gpsites.co/seller/product/happy-ninja-hoodie/

Can you try using browser incognito mode or another browser to test?

Thanks!

[nanoprobes]

Well that sucks. Just tried android Firefox and Chrome and it does the same thing. Incognito mode doesn’t make any difference. You site library Target theme works however on my phone. It’s just my website on mobile.

The X to close button and my Menu button are almost overlapped in the same location. Maybe that’s the cause?

[Leo]

Hmm that’s strange.

Can you disable all plugins except GP premium and WooCommerce in your site?

[nanoprobes]

Yea just did all that. Nothing seems to work. I think it has to do with buttons overlapping. If I rotate my phone (horizontal view) and enlarge the photo and go to close it, the search bar actually opens.

[nanoprobes]

I can make it happen on your default Site Library Target theme on my phone. If you go to a product, scroll down just a tad and enlarge the photo and close it, the menu opens

[Leo]

Hmm I tried like 20 times and make sure to scroll down so the close button overlaps with the menu toggle but still couldn’t replicate the issue.

Just to make sure, the issue happens on this page for you?
https://gpsites.co/seller/product/happy-ninja-hoodie/

[nanoprobes]

No, the Target theme. It happens on every website I have Generatepress installed on too with default theme. Just looked. It happens on the site library Shop theme also on my phone.

[Leo]

I’ve tested and default Shop and Target but could not replicate the issue.

We haven’t had other reports on this as well.

I’ve requested other members from our team to test as well and will report back.

In the mean time, do you happen to have another device to test? Maybe a friend’s phone?

[nanoprobes]

Thanks, please get back to me if others find it happening with their Woocommerce store. I’ll check my friends phone later tonight. Seems to only happen on my Android when the buttons are overlapped.

[nanoprobes]

Every phone I looked at does it. No one I know owns an iphone, just Androids. No idea why you’re the only one not seeing it.

[David]

Hi there,

i tested on my iphone and i couldn’t replicate the issue. But i found that other users reported this bug to Woocommerce:

https://github.com/woocommerce/woocommerce/issues/25458

Unfortunately it doesn’t look like Woo are going to fix it:

https://github.com/woocommerce/woocommerce/issues/29800

Options:

1. Disable the Lightbox – is the lightbox necessary ?
2. Try adding this CSS to move the lightbox UI down so it doesn’t sit over the mobile header:

.pswp__top-bar {
    top: 60px !important;
}

[nanoprobes]

Anyone there own android or is business that good you all own 5 billion dollar iphones? Let’s just get rid of lightbox all together instead of moving it. Moving it down just opens the secondary menu in Target theme on close instead of the main menu now.

[David]

i still run an old second hand iPhone 7+ 🙂
It is something that Woo should fix, although they seem to be reluctant to recognise what is a known bug with the current version of the lightbox they use.

You can add this PHP Snippet to your site to disable the woo lightbox:

function remove_image_zoom_support() {
    remove_theme_support( 'wc-product-gallery-zoom' );
    remove_theme_support( 'wc-product-gallery-lightbox' );
}
add_action( 'wp', 'remove_image_zoom_support', 100 );

This article explains how to add the code:

https://docs.generatepress.com/article/adding-php/

Good news is removing the lightbox should help with performance as its less code to be loaded.

[nanoprobes]

It’s too bad none of you can see it happening. It isn’t good. It gets in the way of everything. But, the code works nicely. I do like the wc-product-gallery-zoom, so I kept that.

It’s probably why most of the new themes at Woocommerce have the mobile menu on the left-hand side.

[Author]

Posts