Safari scaling issues with cursor scale once hover on object is blurry

[0xPragmativDav]

Hi All,

I am trying to fix a rendering/scaling issue with the Safari  browser where once I hover over an object and it scales, the text and the background colour where the text scales is very blurry and pixelated. It works fine with Google Chrome.

Safari version: Version 17.1 

I tried the below solutions but it didn't work for me:
- https://gsap.com/community/forums/topic/30156-safari-v15-rendering-bug/

- https://gsap.com/community/forums/topic/25758-scaled-up-text-in-safari-is-blurry/

 

 

See the Pen YzgGXKy by davalgregory (@davalgregory) on CodePen.

[0xPragmativDav]

And it also does some weird flickering behaviour when I hover over the object. 
I think a fix for this was to add  this on the onUpdate prop in gsap:  transform: "translate()"

onUpdate: () => {

gsap.set(".cursor", { force3D: true, transform: "translateZ(0)" });

}

[mvaneijgen]

Hi @0xPragmativDav welcome to the forum!

 

I would create the element at it's max size, lets say  75px and then animate .from() some other scale to the the default of 1. I've removed 99% of your code because that all wasn't necessary for the demo and I didn't have time to read through what everything does. Hope it helps and happy tweening! 

 

See the Pen YzgGyKr by mvaneijgen (@mvaneijgen) on CodePen.

[0xPragmativDav]

Hi @mvaneijgen   - thanks for responding and sharing, much appreciated.

I do however think the answer you shared is slightly different to what I am trying achieve. I tried the gsap.from:
 

gsap.from(".cursor", {

x: x - 16,

y: y - 16,

ease: "power3",

force3D: false

});

});

But it didn't work for me. Also in my case I can't have the max size to be 75px, I needed to use 15px

[mvaneijgen]

To fix the rendering issue starting with a big element and making it small is as far as I know the easiest solution. You could then set scale: 0.2 to make the item 15px high again (if you start with 75px)

 

Maybe another solution could be is to start with and SVG (Scalable Vector Graphics) these are made the be scaled up and down, but I'm not sure if Safari applies the same rendering to those. 

 

Other wise I would advise you to dumb down your demo and just show the bare minimum you need to demonstrate the issue, that will get you a higher chance that someone else will take a look at it and maybe they have  a solution for you. 

[0xPragmativDav]

1 hour ago, mvaneijgen said:

To fix the rendering issue starting with a big element and making it small is as far as I know the easiest solution. You could then set scale: 0.2 to make the item 15px high again (if you start with 75px)

 

@mvaneijgen So the issue with this is that if I do it this way , wouldn't the text I need to show in the middle be very small to the point I am unable to see it ?
 I will send you a demo video of how it works currently in a Google Chrome., or the same example above , you can view it in another browser other than Safari to see what I am trying to achieve.

 

 

1 hour ago, mvaneijgen said:

Maybe another solution could be is to start with and SVG (Scalable Vector Graphics) these are made the be scaled up and down, but I'm not sure if Safari applies the same rendering to those. 

 

I also tried this just now and Safari also broke it where it  is still pixelated when scaled

[0xPragmativDav]

@mvaneijgen  - so I tried what you said regarding this:To fix the rendering issue starting with a big element and making it small is as far as I know the easiest solution. You could then set scale: 0.2 to make the item 15px high again (if you start with 75px)


And it worked! as Thank you, much appreciated.