Jump to content
Search Community

Webkit pixelated element during scale animation

d1ch0t0my test
Moderator Tag

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hey Guys,

 

I've run into an issue with a scale animation on an element as can be seen in my Pen if viewed in a webkit browser. Firefox is fine.

 

During the animation the edges of the element blur and pixelate but re-assemble on animation completion.

 

I've been scratching my head and nothing I've found elsewhere on the web has worked e.g backface-visibility: hidden, translateZ(0) etc etc. I'm sure there must be an easy fix for this I just can't seem to nail it. Any help is appreciated please. Thank you!

See the Pen pbbQwj by anon (@anon) on CodePen

Link to comment
Share on other sites

  • Solution

Hi d1ch0t0my :)

 

If I set force3D to false, it seems fine to me in Chrome. Please give this a try:

tlmenu.fromTo(menubox, 10, {scale:1, transformOrigin:"50% 50%"}, {scale:30, transformOrigin:"50% 50%", force3D:false});

More info about force3D can be found here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Happy tweening

:)

  • Like 4
Link to comment
Share on other sites

Ok an update to this that will hopefully save some people some time in future. I implemented PointC's force3D:false into my code/page and it had no effect. I then spent the next four hours going through line by line of my CSS and script to see if there was anything that could be causing issues. There was. Backface-Visibility.

 

For me, whenever the expanding circle reaches an element that has -webkit-backface-visibility:hidden assigned to it in the CSS the scaling circle immediately jumped into a pixelated mess. If I remove it, no more pixelated scaling circle. It only happens on elements that have been taken out of the document flow using position: relative, absolute etc.

 

PointC did solve my codepen problem but due to me not understanding what the cause of the actual pixelation was he solved the wrong problem lol. If I remove force3D: false from my script there is no pixelation in Webkit now that the backface-visibility rules have been removed from the CSS.

 

So, hopefully this helps save someone some time and thanks to PointC again for his help. Now if I could only get the scale to work fine without having to remove backface-visibility..... :P

Link to comment
Share on other sites

Hello d1ch0t0my,

 

The reason removing backface-visibility  works is because backface-visibility  is only used for 3D transforms along with perspective. So even though you added force3D: false .. you still had CSS properties like -webkit-backface-visibility  that was telling the browser you wanted to use 3D transforms.

 

The CSS property backface-visibility has no effect on 2D transforms as there is no perspective.

 

So a rule of thumb if you don't want pixelated blurry elements which are caused by a webkit 3D transform bug:

 

Then make sure you:

  • set force3D:false like PointC advised.

And make sure you are not using any 3D transform properties like:

  • backface-visibility
  • perspective
  • transform perspective()
  • transform-style: preserve-3d
  • z (translateZ)
  • CSS 3D transforms that will rotate, since that  means that rotated elements plane will intersect with the z-axis, which is in 3D space.

Please see the spec for backface-visibility

  • This property has no effect on 2D transforms as there is no perspective.

https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

 

Happy Tweening :)

  • Like 5
Link to comment
Share on other sites

By the way, another way of doing this which would still give you GPU-accelerated rendering while also getting rid of the jagged edges is by making the "native" size much larger so that you can then animate from a decimal scale to a scale of 1. Think of it this way: the browser will take a photo (screen-shot) of the element at its native size and then when you scale, it'll basically stretch/squish the pixels of that photo. Thus, if you make the original photo higher-resolution, you get rid of the jagged edges. 

 

Here's a forked version of your codepen showing the same effect, but with this technique that delivers maximum performance and sharpness: 

http://codepen.io/anon/pen/LZRYQQ

 

Notice I had to adjust the width/height, top/left, and apply an initial scale to make it visually start at the same spot. Oh, and I simplified your tweening code a bit too :)

  • Like 3
Link to comment
Share on other sites

  • 5 years later...
On 6/17/2016 at 3:04 PM, Jonathan said:

Hello d1ch0t0my,

 

The reason removing backface-visibility  works is because backface-visibility  is only used for 3D transforms along with perspective. So even though you added force3D: false .. you still had CSS properties like -webkit-backface-visibility  that was telling the browser you wanted to use 3D transforms.

 

The CSS property backface-visibility has no effect on 2D transforms as there is no perspective.

 

So a rule of thumb if you don't want pixelated blurry elements which are caused by a webkit 3D transform bug:

 

Then make sure you:

  • set force3D:false like PointC advised.

And make sure you are not using any 3D transform properties like:

  • backface-visibility
  • perspective
  • transform perspective()
  • transform-style: preserve-3d
  • z (translateZ)
  • CSS 3D transforms that will rotate, since that  means that rotated elements plane will intersect with the z-axis, which is in 3D space.

Please see the spec for backface-visibility

  • This property has no effect on 2D transforms as there is no perspective.

https://developer.mozilla.org/en-US/docs/Web/CSS/backface-visibility

 

Happy Tweening :)

 

This really helped me yesterday when I was about to launch a new website, only realising late on that I had a pixelating issue with a div scaling on my timeline. This cleared it up on Chrome and Safari and is definitely getting saved in my bookmarks for the next time I do a similar page intro!

 

Legend mate.

 

  • Like 3
Link to comment
Share on other sites

  • 2 months later...
On 6/17/2016 at 1:34 AM, PointC said:

Hi d1ch0t0my :)

 

If I set force3D to false, it seems fine to me in Chrome. Please give this a try:

tlmenu.fromTo(menubox, 10, {scale:1, transformOrigin:"50% 50%"}, {scale:30, transformOrigin:"50% 50%", force3D:false});

More info about force3D can be found here:

http://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Happy tweening

:)

Love u!

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...