Переход CSS3 в Chrome и IE

Question

Мне было интересно, почему мой CSS-переходный эффект отлично смотрится в Firefox и очень «перегружен» в IE и Chrome. Я работаю над этим весь день, и я не понимаю, почему это происходит. Я попробовал обратную сторону - видимость, но это тоже не сработает. Я укомплектовать застрял на этом ...

Что у меня есть это:

<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; 
} 

Лучший способ объяснить это открыть this test site в FF, Chrome и/или IE. Может ли кто-нибудь увидеть, что я делаю неправильно? Это о липкой ловушке?

Answer 1

Если вы хотите смоделировать плавность родной анимации приложения, вы все равно можете обмануть браузер, включив рендеринг графического процессора. Просто добавьте эту строку CSS кода

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