- This topic has 13 replies, 3 voices, and was last updated 3 years, 6 months ago by David.
-
AuthorPosts
-
September 21, 2020 at 5:05 am #1452049Fredrik
Hello,
I’m using this code from David,
/* Vertical Scrolling Thumbnails */ .woocommerce div.product div.images .flex-control-thumbs li { padding: 5px 5px 0 0; -webkit-box-sizing: border-box; box-sizing: border-box; } .woocommerce-page div.product div.images { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-item-align: center; align-self: center; max-width: 450px; } .woocommerce div.product div.images .flex-control-thumbs { -webkit-box-ordinal-group: 0; -ms-flex-order: -1; order: -1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-flex: 1; -ms-flex: 1 0 80px; flex: 1 0 80px; /* Adjust PX to suit width of thumbnails */ max-height: auto; /* Adjust Height to Image height on desktop */ overflow: auto; } .woocommerce div.product div.images .flex-control-thumbs li { width: 100%; padding: 0 10px 10px 0; } }
But I have an issue with toggling product gallery images on touch (mobile) using the thumbnails. Any reason why the thumbnails doesn’t respond well using touch? Sometimes it works & sometimes it doesn’t.
On desktop, click events for the thumbnails work, but it doesn’t translate well to mobile.
September 21, 2020 at 7:02 am #1452207DavidStaffCustomer SupportHi there,
its probably the CSS flexbox that is interfering with the carousels behaviour. Best way to test is try it without that CSS – if it works correctly then we know thats the problem.
Fix – don’t apply it to Mobile by putting the CSS inside a desktop media query
September 21, 2020 at 9:21 am #1452573FredrikHello David,
I tried without CSS, turned off all custom CSS on the site, only running default GP.
Still an issue I’m afraid.
On initial page load, it’s not working. Scroll down to the footer & back up, toggle touch starts working.
Reload page it stops working, scroll down & back up it starts working. Almost as if the lightbox is not loaded. This behavior is consistent on both Chrome & Safari on iOS.
So definitely not your code at least ๐
September 21, 2020 at 2:24 pm #1452962TomLead DeveloperLead DeveloperHow do we see the issue exactly? Just loaded it on mobile and the carousel/lightbox seems to work fine without scrolling down and up.
Let us know ๐
September 22, 2020 at 2:14 am #1453463FredrikHello,
Hmm strange one, still have the issue on iOS (latest version), both Chrome & Safari (latest versions).
Did you swipe between images or toggle between images using the thumbnails?
Swiping works for me, but not toggle. You would expect that you can toggle using touch the same way you can toggle between images on desktop using mouse click ๐
I also discovered the carousel/lightbox starts working when you press/touch somewhere on the description area. But reloading the page, not scrolling, or using touch anywhere else than on the thumbnails does not allow you to toggle between images.
I’ll try to get a video together that displays the touch events during a screen recording, but for now, you can see this video where I load the page & try pressing/use touch on the thumbnails to toggle between images, you can see there is a touch event registered but nothing happens:
September 22, 2020 at 3:52 am #1453579Fredrik*Update.
When you interact with any “GP element” on the page the carousel/lightbox starts working.
See video:
September 22, 2020 at 9:47 am #1454158TomLead DeveloperLead DeveloperDoes the same thing happen for you if you test one of our Site Library sites?: https://gpsites.co/merch/product/happy-ninja/
September 22, 2020 at 9:59 am #1454171FredrikIt works perfectly!
Funny, I killed all custom CSS, tried deactivating all plugins, made sure everything is up to date etc. Still same problem.
September 22, 2020 at 10:16 am #1454197FredrikI figured it out, I think.
I’ve set up two products in my shop, identical from each other, except one is a variable product.
A simple product works perfectly, like the Site Library site.
A variable product breaks the product gallery on iOS. This happens when you add a price to each variation. Before adding a price, the product gallery still works.
September 22, 2020 at 1:32 pm #1454438TomLead DeveloperLead DeveloperStrange, does it continue to happen if you deactivate GPP and use TwentyTwenty? Trying to figure out if it’s our code or a bug in Woo.
September 22, 2020 at 2:48 pm #1454507FredrikSwitching to TwentyTwenty comes with the same issues.
So at least not GP related by the looks of it ๐
Interestingly there is the small space around the thumbnail (the edges/frame) that allows toggle on a variable product for iOS. Almost as if the “toggle element” is misaligned or hiding, having a wrong z-index.
September 23, 2020 at 1:18 am #1454907DavidStaffCustomer SupportI think this issue may be covered in this Pull Request:
https://github.com/woocommerce/woocommerce/pull/20002
Notable comments:
Listening for touch support works but requires interaction first.
and
Ensure images switch with the gallery controls
So the touch support listener first requires an interaction with the gallery.
September 23, 2020 at 4:15 am #1455150FredrikHello David,
Thx! Seems to be the same sort of issue or related to the zoom issue, surprisingly this was 2 years ago.
Iโll try to get in contact with someone at WooThemes. Hopefully they can provide a fix since itโs an essential feature in the product gallery.
September 23, 2020 at 4:54 am #1455193DavidStaffCustomer SupportYeah definitely looks like a woo support query.
-
AuthorPosts
- You must be logged in to reply to this topic.