iOS Mobile UX Product Variant Picker Dropdown Glitch

Site URL: http://www.sartorisf.com

When using iOS mobile devices and navigating my site I have noticed some unique issues. With both Safari and Chrome when I select the product variant dropdown box my screen does two things.

1. The entire screen “jumps” or moves as if i chose to refresh (IT DOESNT REFRESH) it just imitates the movement.

2. Once I choose a variant, the next time click on the box the screen zooms in to the box itself requiring me to constantly pinch to zoom out.

I have reached out to support and they have not responded. As well I had a friend who does not use iOS to try on his mobile device. He did not have the same issue.

The video attached demonstrates the issues.

Please post your site-wide password so we can take a look at your issue.

8 minutes ago, creedon said:

Please post your site-wide password so we can take a look at your issue.

The video clearly shows the issue but I will allow access. Password: 12345

4 minutes ago, ccxwood said:

The video clearly shows the issue but I will allow access.

Videos and pics of an issue are always helpful. For us to examine the issue in more detail and try to effect a possible fix it helps us if we can access your site. Thank you for the password.

41 minutes ago, ccxwood said:

2. Once I choose a variant, the next time click on the box the screen zooms in to the box itself requiring me to constantly pinch to zoom out.

I'm wondering if it is related to this issue.

15 minutes ago, creedon said:

I'm wondering if it is related to this issue.

 

It would seem so, but when I interact with similar forms on mobile such as a dropdown variant box on “etsy” it does does not have the same issue though the actions are identical.

IIRC one part of the issue, it's been several days since I read up on this, the issue occurs on iOS etc. when the font is less than 16px.

It would be interesting to know if the etsy page you mention is using fonts 16px or greater?

Can you provide an etsy link where the issue is not happening for you?

6 minutes ago, creedon said:

IIRC one part of the issue, it's been several days since I read up on this, the issue occurs on iOS etc. when the font is less than 16px.

It would be interesting to know if the etsy page you mention is using fonts 16px or greater?

Can you provide an etsy link where the issue is not happening for you?

https://www.etsy.com/listing/732546729/genuine-natural-gray-blue-tiger-eye-hawk?ref=hp_opfy-1&frs=1&bes=1

Interesting! The URL you provided, the variants are 16px!

On your site the variants are 12px.

I'm heading off for the night but if you're game tomorrow perhaps we can try getting your variant fonts up to 16px and see if that takes care of the issue.

If I don't respond again to this thread soon, like in 12 hours or so, post a bump to this thread so it will hopefully pop up for me, as a reminder. A personal message would work also.

Or is someone else wants to pitch in, in the mean time, please feel free!

2 hours ago, creedon said:

Interesting! The URL you provided, the variants are 16px!

On your site the variants are 12px.

I'm heading off for the night but if you're game tomorrow perhaps we can try getting your variant fonts up to 16px and see if that takes care of the issue.

If I don't respond again to this thread soon, like in 12 hours or so, post a bump to this thread so it will hopefully pop up for me, as a reminder. A personal message would work also.

Or is someone else wants to pitch in, in the mean time, please feel free!

I reset the Variants. Issue still persists.

I received an answer from support acknowledging the issue:

Quote

Thank you for reporting this behavior. I can confirm this is due to an issue on our end related to product variant selection on IOS devices. We’ve noted this for our Design and Engineering teams to review, and they’ll use this feedback when implementing fixes and improvements in future releases.

As far as the proposed workaround goes, it looks like positioning the cart to the Left or Center will be the best option to ensure the cart optimally displays on screen after selecting a variant for your product.

I want to set the expectation that this suggestion is a current option within the tool, rather than a fix for your site's current behavior. In cases where we can't promise a resolution time due to the complexity of fixing a particular issue, making updates to your site is a much more viable and immediate solution.

Please keep in mind that there are many moving parts we need to address before any changes are made, and we can't guarantee changes to this behavior in the immediate future. That said, all feedback is reviewed and your continued input is always encouraged.

Thank you again for reporting this. If you come across any other unusual behavior in the future, please let us know.

Best regards,

I suggest changing the variant options font size to 16px with some CSS.

Add the following to Store Settings > Advanced > Page Header Code Injection.

<style>

  .ProductItem-details .variant-option select {
  
    font-size: 16px;
    
    }
    
  </style>

I tested the fix and it appears to work on my iPhone.

Let us know how it goes.