Problem with scaling in Safari

Design help Animations & Interactions
1

Hi there,

I have a problem with our custom Font and scaling on different browsers etc. I have tried to make the Font dependent on vh instead px but it does not seem to improve anything.
this is how it looks on chrome

59
591901Ă—1122 127 KB

this is how it looks on safari

40
401897Ă—1157 109 KB

Is there a better way of doing this so I do not run into theses issues?!
Since our webpage is already live it is kind of urgent. Many thanks

Simon

Here is my public share link: Webflow - NewOrder

2

Hi @Pambeloo

It looks like this is a known issue when scaling font. I found a stack overflow post that covers a couple of different solutions: Blurry text after using CSS transform: scale(); in Chrome - Stack Overflow

You may consider trying to implement one or both of these to see if it helps.

Another alternative is to use an SVG here rather than normal text. Hope this helps!

3

HI @Brando ,

thanks for your fast reply! Much appreciated!

I added it as a svg file - still the same result on safari. Any idea how to solve this? Maybe I added it in a non conform way? Appreciate further help

Also I have the issue on Safari not in chrome as mentioned in the Stackflow link.

Thanks again
Simon

4

Anyone with an idea how to avoid this blurring affect? Many thanks1

5

Yes. Make it so that the largest scale is actually a scale of 1 and smaller scale is 0.5 or whatever. This way it won’t be blurry.

6

Could you help me understand your layout? I opened NEW ORDER FINAL NAV, and it looks like your logo is actually two SVGs (Image and Image 40). Were these originally text, or always an image file? In other words, is the “font” that you set to vh actually referring to an image?

If you’re working with actual text, adding custom CSS to set backface-visibility to hidden should fix the rendering issue.

backface-visibility: hidden;

If you want to continue using images, my solution is the same as Dram’s approach. Your issue is browser dependent; even SVGs can become pixelated in some browsers when they’re scaled higher than 1. So, you’ll need to work backwards and resize each image to match its largest scale (the size it should be at the beginning of your animation). Upload these new versions, and scale its ending point (the small logo) downwards. I think you had the large version scaled to 5, so instead, it should be scaled to 1 at the start of the animation/end at a scale of .2.

7

Thanks @dram and @tholl for helping out! I get both ways of fixing but it seems that the backface-visibility could be the easier fix for what I want to achieve

@tholl
I restored the font version via backup . (I indeed used font initially) Unfortunately since I have never really used code before - where and how do I add this custom CSS code and do I only use this line or do I need to add sth else? Sorry for having to ask this stupid question.

thanks again much appreciated!
Best
Simon

8

No worries! Go to the settings on the relevant page and insert in < head > (change the class names accordingly):

<style>
.class-of-new, .class-of-order {
   backface-visibility: hidden;
}
</style>

I’m pretty sure it will also work if you go to your Webflow settings (Add Custom HTML & CSS) and put it there (if you want to implement across your entire site/if the classes don’t change). I’ve also read that Safari doesn’t respond well to vh/vw units, so define sizing with pixels.

I’d recommend saving your current site as a backup in Webflow if this doesn’t work (and, in which case, it’d be easiest to revert to your current site and change the image sizes via an external software like Photoshop). I had a similar problem with text on my site, and though backface-visibility resolved it, it’s better to be safe/avoid wasted time through saving a backup!

You could also explore a solution like this: html - Preventing blurry rendering with transform: scale - Stack Overflow).

9

HI @tholl,

I implemented your solution on the home and also checked backface hidden on project page and it did not improve anything for me unfortunately. Just checking if I did it correctly, I added:
…
.class=“new-header-nav”, .class=“order-header-nav” {
backface-visibility: hidden;
}
…

Can you confirm that I added it the correct way? If so then I will have to rework the image. I assume Dram’s approach would include changing the svg format to a jpeg and then add it with a bigger resolution. I cannot see this working with adding it as an svg - correct?
Many thanks again!!
Best
Simon

10

Actually you don’t need any custom code. Backface visibility settings are available from inside designer.
89%20PM

1 Like
11

Of course not. There is no need to redo the svg at all.

12

Hi Dram,

thanks for the hint with the backface - much easier for me that way J However it is still blurry in Safari. So I guess I have to implement the 1 and 0.2 approach.

I am a bit confused now how to do this. I initially have to make the font bigger, correct? When I scale the font 5 times bigger (to 300 px) and then try to scale it down to 0.2 for the initial state of the animation (based on page scroll) I totally lose control over the animation and especially the placement of the logo.

Is there a different way to do this animation where I do not run into placement issues or is there a tutorial or sth where I could learn how to do this properly?

Again appreciate all your help on this.
Simon

13

I assume you mean that the words are now too far away initially? Give your words transform origin like so:

91%20PM
91%20PM1916Ă—1084 1.49 MB

Then you will be able to tweak their move more reliably in your ix

14

Hey dram,

thx, that little hint helped me to control the animation. Finally implemented it as font scale initial scale 1 which shrinks to 0.2

Thanks again @dram and @tholl for all the help.

Best Simon