0xPragmativDav
0xPragmativDav's Achievements
-
Rare
-
-
-
Rare
-
Rare
Recent Badges
2
Reputation
-
@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.
- 6 replies
-
- 2
-
-
- safari-bug
- safari browser
- (and 1 more)
-
@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. I also tried this just now and Safari also broke it where it is still pixelated when scaled
-
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
-
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)" }); }
-
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/