Bug: [V2-media-gallery] Is Broken On Mobile

[ZoeBeykirch]

Issue Type

Bug

Summary

The new redesigned block [V2-media-gallery] is not working properly on mobile devices.

Priority

Blocker

Description

On mobile devices, the [V2-media-gallery] that is used on the All New VNL PDP page is not behaving as it was during the digital reveal. This may be due to the helix 5 upgrade and should be investigated. The user is not able to swipe through the images, and if the user tries to swipe from right to left it makes the entire page go away and only reveals the image on white background. When users zoom out, it also now leaves the sections exposed as seen in the below screen shots. This is affecting both Volvo US and Canadian (FR and EN) sites.

Affected Device Classes

Mobile

Affected Browsers/Devices and Versions

We are seeing this error in production on iOS mobile devices, but it should also be re-tested with a physical tablet device if possible. The Google browser stack testing via dev tools show it rendering properly on mobile and tablet devices, but it is not actually the case on mobile as seen in the below screen shots.

Devices tested: iPhone 15 Pro, iOS 17.5.1 iPhone 13, iOS 17.4.1

Browsers tested: Chrome, Safari, Edge

Steps to Reproduce

1. On a physical mobile device, navigate to:
2. https://www.volvotrucks.us/trucks/all-new-vnl/#interior
3. https://www.volvotrucks.ca/en-ca/trucks/all-new-vnl/#interior
4. https://www.volvotrucks.ca/fr-ca/trucks/all-new-vnl/#interior
5. When you see the images under the "explore driving environment" in the Interior section of the page, try to scroll across the images to the right and/or left.

Expected Results

Oddly enough the behavior is rendering as one would expect on Chrome Dev tools as seen in this below video screen recording: https://media.volvotrucks.us/asset/58772/Bug%20-%20expected%20behavior%20example?collectionAccessKey=4BB9F731A2C3D8510AE27CC0DCF70745BDFB689C8B4C187CBD9E3D&collectionId=bf7a4a9c-e83d-4d89-9300-0f41fdf7e06e&returnTo=%2Fcollection%2Fpreview%2Fbf7a4a9c-e83d-4d89-9300-0f41fdf7e06e-6.11.24%2520Bug%2520Examples%2520VTNA%2520%3FcollectionAccessKey%3D4BB9F731A2C3D8510AE27CC0DCF70745BDFB689C8B4C187CBD9E3D%26collectionId%3Dbf7a4a9c-e83d-4d89-9300-0f41fdf7e06e&breadcrumbType=collectionPreview

Actual Results

Video screen recording: https://media.volvotrucks.us/asset/58771/Bug%20video%20example?collectionAccessKey=4BB9F731A2C3D8510AE27CC0DCF70745BDFB689C8B4C187CBD9E3D&collectionId=bf7a4a9c-e83d-4d89-9300-0f41fdf7e06e&returnTo=%2Fcollection%2Fpreview%2Fbf7a4a9c-e83d-4d89-9300-0f41fdf7e06e-6.11.24%2520Bug%2520Examples%2520VTNA%2520%3FcollectionAccessKey%3D4BB9F731A2C3D8510AE27CC0DCF70745BDFB689C8B4C187CBD9E3D&breadcrumbType=collectionPreview

Attachment

No response

[girishdigrajkar]

Validated and able to get the correct results and hence, closing the issue :

iOS 17.5 : Safari

chrome

iOS17.3 : Safari

chrome: