Jump to content
Search Community

Firefox jitters/jumps at end of animation

lexbi 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

Hey,
 
I've seen some topics on this before suggesting that a few things will work, but I haven't had any luck so far.

 
This is what I am witnessing: http://cl.ly/0A050R0z2Y47

If you can see, the element seems to change its state at the end of the transition and moves like 1 pixel down.
 
Potential CSS fixes have so far proven a failure (for firefox), including setting:

 

    perspective: 1000px;
    -webkit-perspective: 1000px;

    transform:translateZ(0);

    -webkit-transform:translateZ(0);

    backface-visibilitiy:hidden;

    -webkit-backface-visibility: hidden;
 
None of them seem to work.
 
I have also tried setting "force3D:true" to my GSAP JS, this does seem to work for chrome.
 
I have also tried rotating to & from values of 0.001 to 0.002
 
Is there anything else I can try?

See the Pen aOMqKw by lexbi (@lexbi) on CodePen

Link to comment
Share on other sites

Hello lexbi, and Welcome to the GreenSock Forum!

 

I noticed you said you tried using the CSS property perspective. The perspective property only applies to the elements first children. I believe you are looking to use transformPerspective ( transform:perspective(1000) ) which applies to the element itself.

 

Also i am a little confused on the effect you are trying to achieve. The only time i see the element jump is if you hover over the element on the far left edge.

 

In the below example i added a border around your text so you can see that when you hover over the far left side of your text.. the text animates which moves the text away from your mouse. And then that could cause the jump your seeing since it forces the mouseleave to fire making it hover on and hover off.

 

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

 

If you hover say over the letter "o" or the letters "ll" you see it doesn't jitter since when it animates to the right the text is still within your mouseenter hit area. You can also try wrapping your text with another div tag and bind your hover events to its parent. Setting the parents position property to relative. And then setting the text div to position absolute. This way your text div is absolutely positioned relative to its parent

 

You could try setting up the text so that it is display:inline-block; so the div wraps just the text and not the available space to the right of it.

 

Please let us know what is the exact effect you are trying to achieve, and see if the above helps?

 

Im sure we can try and find a solution to what you are trying to accomplish. :)

 

Resources:

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

transform perspective function: https://developer.mozilla.org/en-US/docs/Web/CSS/transform

  • Like 1
Link to comment
Share on other sites

Hey Jonathan,

 

Thanks for your response!

 

The effect I am trying to get is to not have it jump maybe 0.3s after the end of the transition. Basically I want firefox to behave like chrome does if you compare the following examples:

 

Here is an example in chrome:

http://cl.ly/2o2e0u2Z3W1O

 

Here is what happens in firefox:

http://cl.ly/3Q2Y3N2j3e2d

 

Firefox seems to change its state at the end of the transition.

 

Also regarding your other comments, my css on my actual project is more like what you've described, I've updated the codepen to reflect this a bit more accurately.

Link to comment
Share on other sites

I see it now.. this is also a known bug in Chrome depending on the CSS properties used or lack there of..

 

but see this example:

 

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

 

try adding position:relative to your anchor tag (<a>) so when it animates its out of the flow of the document.

ul{
  text-align:center;
}
li{
  display: inline-block;
  padding:0 20px;
  position: relative;
  list-style-type:none;
}
a{
  font-size:64px;
  display: block;
  position:relative; /* add this */
  width:100%;
  height:100%;
  border:1px solid black;
}

and also add transformPerspective and transformStyle: "preserve-3d" to the anchor tags parent LI tag (<li>). and set your initial scale value using the GSAP set() method

// add this before your hover event handlers
// I set the initial scale to a zoom factor of 1
// set transformPerspective and transformStyle to help with the jitter
TweenMax.set("a",{
   scale:1,
   transformPerspective:1000,
   transformStyle:"preserve-3d"
});

$("a").on("mouseover",function(){
  TweenLite.to($(this), 0.3, {
    scale:0.9,
    autoAlpha:0.8,
    rotation:0.001,
    //force3D:true,
    ease: Back.easeOut
  });
})

$("a").on("mouseleave",function(){
  TweenLite.to($(this), 0.3, {
    scale:1,
    autoAlpha:1,
    rotation:0.001,
    //force3D:true,
    ease: Back.easeOut
  });
})

see if that helps.. withthe above example, i am not seeing the jitter in Windows 7 64-bit Firefox 39.03

 

Also you could also add the slight rotation to get around other builds of Chrome that cause those jitter shenanigans.

 

The reason i commented out force3D:true.. is because force3D default is "auto" .. so GSAP is smart enough to know when to use it based on what CSS properties you use.

 

Please see the CSSPlugin Docs

 

force3D

As of 1.15.0, force3D defaults to "auto" mode which means transforms are automatically optimized for speed by using matrix3d() instead of matrix(), or translate3d() instead of translate(). This typically results in the browser putting that element onto its own compositor layer, making animation updates more efficient. In "auto" mode, GSAP will automatically switch back to 2D when the tween is done (if 3D isn't necessary) to free up more GPU memory. If you'd prefer to keep it in 3D mode, you can set force3D:true. Or, to stay in 2D mode whenever possible, set force3D:false. See http://css-tricks.com/myth-busting-css-animations-vs-javascript/ for more details about performance.

 

Hope this helps :)

  • Like 3
Link to comment
Share on other sites

Hi Again,

 

Unfortunately in Firefox 39.0.3 on OSX it's still going on in your Codepen, it seems a little better, it's not jumping as much, but it still seems to almost rearrange itself at the end of the animation. Here's an example of what happens:

http://cl.ly/1M0X000C2k3V

 

Good to know about the force3d thanks for that explanation.

Link to comment
Share on other sites

This looks like a font transform bug in Firefox 39.03 for OSX, since i am not seeing the jitter on Windows 7 or Windows 8 (64-bit) Firefox 39.03..

 

This looks like a anti-aliasing change bug after animation ends.

 

You could also try adding some font -smoothing in Firefox: -moz-osx-font-smoothing: grayscale;

/* you could try the below */
html { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
}

/* and this */

a {
   -moz-osx-font-smoothing: grayscale; 
   -webkit-font-smoothing: antialiased; 
   -webkit-backface-visibility: hidden;
   backface-visibility:hidden;
}

The only thing i can think of is to remove the transformPerspective  on the <a> tag, and try using perspective on the <li> tag (the anchor tags parent).  maybe adding backfaceVisibility: "hidden"  to the set() method.

 

maybe also making your anchor tag display:block so it fills up the entire space of its parent the LI. Since there are known bugs when using display:inline-block. Also adding a specific width and height to your LI. And making your anchor tag absolutely positioned

 

But that is all i can think of since i dont have access right now to a device with OSX

 

Reference:

https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth

  • Like 2
Link to comment
Share on other sites

This doesn't look like a GSAP bug, but rather a rendering bug in Firefox OS. It seems that OSX has more Firefox rendering bugs than Firefox on Windows.

 

What OSX version are you seeing this on?

 

If i were you, i would submit a Mozilla Bugzilla Bug Report letting the Mozilla Firefox Dev Team know about this text anti-aliasing bug on Firefox OSX. Including the link to your helpful video examples and code:

 

https://bugzilla.mozilla.org/

 

And the guidelines when submitting a Firefox bug report:

 

https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines

 

Can anyone else confirm this on the specific OSX version lexbi is seeing this on?

 

Any additional eyes on this issue will be greatly appreciated! :)

  • Like 1
Link to comment
Share on other sites

  • 2 weeks later...

I would still recommend submitting that bug report to Mozilla, since by the looks of that link you provided about Servo (thanks by the way). Is for a new rendering layout engine for Firefox Mobile. Which is awesome news since Mobile Firefoxe,  is notorious for horrible rendering, especially transforms!

 

Thanks for posting back and Happy Tweening :)

Link to comment
Share on other sites

  • 3 years later...

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...