Jump to content

New 'scale text' option jittery on mobile scroll 7.1

Recommended Posts

Hello!!!

Alright, here's a new one.  I have a 'coming soon' style page where I hide the header and footer as I'm working on this site. However, I have noticed that on mobile, the fonts that I have used the 'scale text' option are super jittery on scroll (just on mobile). I narrowed this down as I tried to removed the scale text option and it worked just fine without bouncing around, however I really want to have these letters scaled to fit the text box for aesthetics. What might be causing this, and how can that be fixed??

www.throwceramics.com
pw: cone5

 

I've included a screen recording of what I'm talking about. 

 

 

 

 

Link to comment

I tried but it seems fine when scrolling on mobile. Have you figured it out?

https://www.awesomescreenshot.com/video/12190577?key=845cb0e61c6367497d8a481a7dc7b851

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
7 minutes ago, oldegray said:

@bangank36 I haven't figured it out. It happens when I view it on Safari on iphone.  What browser and device are you using in your screen shot?

Mine is Samsung S20FE with chrome and edge browser . They all works properly

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
1 minute ago, bangank36 said:

Mine is Samsung S20FE with chrome and edge browser . They all works properly

Agreed, the jittery problem doesn't happen in Chrome on my iPhone either. Just Safari. Do you know why this would be the case that the 'scale text' would do this just in Safari? Or who I could reach out to see why? It seems like a Squarespace bug that one of their functions wouldn't work properly on a commonly used browser for mobile. 

Link to comment
On 11/3/2022 at 10:07 AM, oldegray said:

Agreed, the jittery problem doesn't happen in Chrome on my iPhone either. Just Safari. Do you know why this would be the case that the 'scale text' would do this just in Safari? Or who I could reach out to see why? ....

I also am struggling with finding a fix for this same exact issue. Please let me know if this gets resolved and what you do to fix the issue. I will do the same!! Thanks in advance

Link to comment
On 11/2/2022 at 10:01 PM, oldegray said:

Hello!!!

Alright, here's a new one.  I have a 'coming soon' style page where I hide the header and footer as I'm working on this site. However, I have noticed that on mobile, the fonts that I have used the 'scale text' option are super jittery on scroll (just on mobile). I narrowed this down as I tried to removed the scale text option and it worked just fine without bouncing around, however I really want to have these letters scaled to fit the text box for aesthetics. What might be causing this, and how can that be fixed??

www.throwceramics.com
pw: cone5

 

I've included a screen recording of what I'm talking about. 

 

 

 

 

@tuanphan have you seen any issues with this?

Link to comment

This is a known issue with Safari on mobile. It seems to affect the new 'scale text' feature in 7.1. 

I seem to have found a workaround, it basically involves using some CSS to override the scalable text on the mobile view. It's not a perfect solution, but it works until Squarespace fixes this (or Safari gets better). 

Here is some example code, you will want to modify this to your specific issue. In this case we are targeting our h1 headings:

@media screen and (max-width:767px) {
.sqs-block-html .sqsrte-scaled-text-container>.sqsrte-scaled-text h1 {
 font-size: 9.5vw!important;    
  } 
}

So it turns out that this Safari bug happens with not just the "scale text" feature of 7.1, but with lots of css responsive units, including em, rem, etc. (you can see this yourself by using these units in the above code example). I found that for some reason the viewport width (vw) work great and is an exception to this. 

Like I said, it is not a perfect or ideal solution, but it works. Might require a lot of tweaking depending on your site / context / use case. Tested on iPhone 13, 1Phone 13 Pro Max, iPhone XS, iPhone XS Max.  

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.