Safari Browser Scaling Pixalated

[CRE-ATE]

Hello hope someone can help, I am doing a logo which scales and descales when you scroll down. On Chrome + Firefox it works perfect.  
Tried it with a SVG + PNG got 2 example but cannot seem to fix the issue and look on forums on forum on forum  HELP ME! 

PNG version 

See the Pen oNOVwPa by jimmee (@jimmee) on CodePen

SVG version  

Thanks, James 

See the Pen ExJMXJL by jimmee (@jimmee) on CodePen

[mvaneijgen]

Hi @CRE-ATE welcome to the forum!

 

What for me works best is having the scale always between 0 and 1, where 0 is the minimum and 1 is the max it can have, setting scale beyond that will result in rendering bugs/issues. 

 

So in your case make the logo as big as you want it to be and then scale it .to() the value you want it. See demo below. Hope it helps and happy tweening! 

 

See the Pen PogLKwP?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[CRE-ATE]

Hello @mvaneijgen thanks this works perfect. When I did that I noticed that it now scales small to larger when I implemented it on a website. It doesn't show this on our codepens but here's a wee 3sec video  https://capture.dropbox.com/PXau4JcCYRJc1GqQ.   Do you know how I reverse it, as it should be LARGE and then scale DOWN when scrolling down the page. 

Am a super beginner, but learning each day. So thanks thank thankssssssss

[mvaneijgen]

Check the demo again. I've changed your tween from a .from() to a .to(), so that will reverse the logic. So in my example it scales from scale: 1 to scale: 0.1

[CRE-ATE]

hello @mvaneijgen your are a super star, thank your help todayif we meet in the future, beers on me