Pixelated Text when scaling on Safari/iOS

Animations
1

I have a text on my project that scales up (quite a lot) when you scroll down.

This is running very well and smoothly on Windows PC (using Chrome), on Android (using Chrome), and on MacBook when using Chrome. The text scales up perfectly and always with perfect definition.

However, when seeing the website on Macbook using Safari, or on iPhone using either Chrome or Safari the text gets extremely pixelated when scaled up.

I’ve tried a series of different workarounds, including using an SVG, and uploading the font in WOFF, among others that I found online but don’t really understand, but I couldn’t fix it.

EDIT: I realized in the meantime that this only happens when I have a video on the website. As seen below:

With video:

test_video

Without Video:

test_novideo

Help would be really appreciated!

2

I talked with ReadyMag Support and it seems to be a bug.

However, I found a workaround, which is to put either the text or video in a “fixed on-screen” position.

2 Likes