New 'scale text' option jittery on mobile scroll 7.1

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. 

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

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

@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?

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

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. 

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

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?

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.  

I'm having the same problem with the jittery scaled text when viewed on mobile - in both Safari and Chrome. It's a really unfortunate bug - I'm wondering if anyone is still having the same issue? I designed so much of my recent site around the text layout, it's going to be a lot of work to make all these adjustments for mobile. I hate to say it, but with all the bugs in 7.1, it's getting harder to sell this as a solution for my clients needing user-friendly in-house websites.  

Has anyone figured this out yet?  I've been dealing with it forever.  

I tried to use the custom CSS that @DanielRyanReiff created on my site, but it didn't work.

On 8/18/2023 at 5:51 PM, JaseBTC said:

Has anyone figured this out yet?  I've been dealing with it forever.  

I tried to use the custom CSS that @DanielRyanReiff created on my site, but it didn't work.

JaseBTC, that code was an example and needs to be modified with the correct CSS selectors for your specific circumstance. Please share a URL and point out where this is happening.