Jump to content

iOS Mobile UX Product Variant Picker Dropdown Glitch

Recommended Posts

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.

Link to comment
  • Replies 11
  • Views 581
  • Created
  • Last Reply
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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

 

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

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?

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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

Link to comment

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!

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
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.

Link to comment

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,

 

Link to comment

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.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Archived

This topic is now archived and is closed to further replies.


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.