CODEWITHSUNDEEP
css
Meules
Meules

Reputation: 1389

CSS3 transition jumpy in Chrome and IE

I was wondering why my CSS transition effect looks great in Firefox and very "jumpy" in IE and Chrome. I'working on this one all day now and I can't see why this is happening. I tried backface-visibillity but that also doesn't work. I'm completly stuck on this one...

What I have is this:

<div class="stickyWrap">
  <div id="header">content</div>
   <div id="nav">content</div>
</div>

CSS:

#header{
    -webkit-transition: all 0.3s linear 0s;
    -moz-transition: all 0.3s linear 0s;
    -o-transition: all 0.3s linear 0s;
    transition: all 0.3s linear 0s;
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
    padding: 20px 0;
}
.stickyWrap.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 99;
}

.stickyWrap.sticky #header {
    padding: 5px 0;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition: all 0.2s ease-in-out 0s;
    -o-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
    -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
    backface-visibility: hidden;
}

The best way to explain is to open this test site in FF, Chrome and/or IE. Can anybody see what I'm doing wrong? Is it about the stickyWrap div?

Upvotes: 3

Views: 1297

Answers (1)

lomas09
lomas09

Reputation: 1104

If you are looking to simulate the smoothness of native app animation you can still trick the browser into enabling GPU rendering. Just add this CSS line of code

.myAnimatingClass{
    transform: translate3d(0,0,0);
}

Upvotes: 1

Related Questions