Jump to content
Search Community

Half-pixel wonkiness on resize

zachschnackel test
Moderator Tag

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

Hi all!

I've created a CodePen that shows off a panel animation I'm working on for the backend of my app (obviously simplified for demonstration). If you click through with the buttons on the top (have a large screen so you can see the convo view slide over with the inbox view still there) you'll notice I'm animating the panel widths with flexBasis. On resize EVERYTHING is jumping around when Chrome hits half-pixels (look at the sample convo and button, as well as the pseudo selector text)... but it's only Chrome from what I can tell. It almost seems like it's an issue with how the values are calculated, but I'm unsure if this has anything to do with GSAP. I've tried `will-change: transform`, the typical `backface-visibility` tricks, and even setting `force3d: true` in the animations, but it's just not working. Any tips on how to avoid all the jitters would be much appreciated.  I'm also noticing some bluriness on non-retina screens. Thanks!

 

Try to look at the demo in debug mode.

See the Pen jmRYLR by zslabs (@zslabs) on CodePen

Link to comment
Share on other sites

I don't see anything wrong. And we can't fork or view your pen in debug mode because it's private. It's annoying feature of CodePen.

 

Are you using the latest version of Chrome? v59 fixes some issues with scaling and rounding pixel values for non-transform related changes. 

 

 

  • Like 2
Link to comment
Share on other sites

Hey Blake,

Thanks for taking a look. I've made that pen public. Are you on a non-retina screen by chance? We were noticing the issue when viewing in debug mode https://s.codepen.io/zslabs/debug/jmRYLR and both the convo and profile panels were open (on desktop view so you can see them side by side). In the compute panel within Chrome, the text was blurry on decimal pixel values of the surrounding `.convo-wrapper` and `.profile-wrapper`

 

We're seeing lots of "jittering" with the message and button elements. I did just upgrade to v59 and restarted, but still there.

Link to comment
Share on other sites

Hello @zachschnackel , and Welcome to the GreenSock Forum!

 

The reason you might see that jitter is do to the fact you only have matrix() being used on your transform instead of matrix3d(). You can see that in your inspector on the element after it has been animated in the style attribute.

 

In order to have GSAP use matrix3d() to trigger a hardware acceleration you need to add rotation:0.01 and or z:0.01 to your tweens .  You can also trigger matrix3d() by using perspective and transform-style: preserve-3d. I have noticed instances where CSS will-change wont trigger hardware acceleration on the element due to how each browser handles will-change.

 

I always let GSAP make my transform matrix3d() and don't leave it up to the browser to trigger it with will-change or other CSS 3d transforms properties.

 

Like this

 

See the Pen c6778b09fc04ab463a76b682eaa989be by jonathan (@jonathan) on CodePen

 

Does this help? :)

  • Like 1
Link to comment
Share on other sites

Hi @Jonathan appreciate the reply! I tried both the rotation and properties like you mentioned, but that didn't make a difference. I've noticed that if I translate the wrapper by a whole value (like 100%) the bug is not there; it appears only when I'm interacting with calculations that would render a subpixel.

Link to comment
Share on other sites

If your animating using percentages for transforms x, you should really be using xPercent or yPercent since x and y are pixel based.

 

See CSSPlugin: https://greensock.com/docs/#/HTML5/GSAP/Plugins/CSSPlugin/

 

Notes about transforms

  1. To do percentage-based translation use xPercent and yPercent (added in version 1.13.0) instead of x or y which are typically px-based. Why does GSAP have special properties just for percentage-based translation? Because it allows you to COMBINE them to accomplish useful tasks, like perhaps you want to build your own "world" where everything has its origin in the very center of the world and then you move things in a px-based fashion from there - you could set xPercent and yPercent to -50 and position:"absolute" so that everything starts with their centers in the same spot, and then use x and y to move them from there. If you set x or y to a percent-based value like 50%", GSAP will recognize that and funnel that value to xPercent or yPercent appropriately as a convenience. Our 1.13.1 Release Notes have some great demos showing how xPercent and yPercent can help with responsive layouts.

:)

  • Like 1
Link to comment
Share on other sites

Thanks for the tip about using x/Y Percent. Unfortunately it appears to be an issue with flexBasis as removing those properties does not cause the jitteriness on resize. Is there a way onUpdate to force the calculation of the container to always be the lower-end of the pixel calculation for the container it is interacting with? It's just so odd that this is only an issue in Chrome (59).

Link to comment
Share on other sites

The only thing i see with your messages and button elements jittering.. to me at least it was more of the resize of elements when being resized due to the rems unit being used. Nothing unusual, then an actual jitter bug ;)

 

But like Blake i am not seeing any jitter. Tested in Windows 10 chrome 59.0.3071.86.

 

Are you on a Mac or apple device ?

  • Like 1
Link to comment
Share on other sites

FWIW I'm on Chrome 58 Mac (for a few more minutes until I welcome 59) and I haven't been seeing anything weird. 

I guess as of now it appears fairly conclusive that Chrome 59 + flexbasis are to blame. 

 

I'm not really familiar with flexBasis or what you are asking about "lower end of the pixel calculation". If you want to hijack values that GSAP is going to set and modify them in some way before they are set, you could look into the ModifiersPlugin:

https://greensock.com/modifiersPlugin

 

  • Like 1
Link to comment
Share on other sites

Hey everyone - thanks for sticking with me on this. Yeah the jitteriness with the buttons and message is part of the issue there; so that's entirely based on rem? Thanks @Carl for mentioning the Modifiers plugin, that's super useful (but yeah I guess doesn't really help out here). Another dev was talking to me about this and mentioned that when he was originally working on this panel system in CSS (I'm re-doing it in GSAP) anything he did that transformed anything but 100% would cause blurry text in Chrome; so since I'm seeing something similar, I wonder if this is outside of GSAP.

Link to comment
Share on other sites

You could try and add backface-visibility:hidden and transform-style:preserve-3d to the element your using 3D transforms on. As well as using and perspective:1000px on the parent of the transformed elements parent to prevent the blurry text. Some browsers require those properties be applied so it can render the 3D transforms correctly. You will probably need to use the webkit prefix since these shenanigans always are in webkit based browsers.

 

Usually triggers in Chrome for blurry text and images are the following:

  • Transform scaling above a scale factor of 1
  • Using transform scale on a CSS background-image
  • Missing CSS properties like backface-visibility and transform-style, and perspective or transform: perspective()
  • Using the will-change CSS property 
  • Not using the will-change CSS property

 

Because Chrome changes above css behavior on each new version :)

  • Like 2
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...