1

While testing my website on an iOS device I realized that a particular transition, which I used to animate the changing of a div's background-color, looked very jittery on it. At first I thought it was the device's fault, but when I later tested on a few other, newer devices the result was the same.

I did some research and discovered that this is a well known problem, and that all I need to do to improve the animation quality is to coax iOS into enabling hardware acceleration. This answer showed me how:

-webkit-transform: translate3d(0, 0, 0);

Adding this style to the the div completely smoothed out the transition. However, it had the unintended side-effect making all elements that had position: fixed to stop working properly, and instead behave as if they had position: absolute instead.

Here is an screenshot of my page, slightly scrolled down, viewed on an iPad without the style:

No style

And here is a screenshot of the page scrolled down the same amount, but with the style:

Style

The nav is, in fact, still there. You just have to scroll up to see it. It is no longer fixed to the viewport.

Here is a demo which demonstrates the bug in action:

html,
body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    transform: translate3d(0, 0, 0);
}

#nav{
    width:100%;
    height:10%;
    position:fixed;
    top:0;
    left:0;
    background-color:red;
}

#content {
    width:100%;
    height:500%;
}
<!DOCTYPE html>
<html>
 <body>
  <nav id="nav">
  </nav>
  <main id="content">
  </main>
 </body>
</html>

The red nav should be visible even after scrolling down. Depending on your browser, this may or may not work properly as is. Removing the problematic -webkit-transform: translate3d(0, 0, 0); style makes it work properly across all browsers.

This is one of several threads I found which confirm my suspicion of this not being case-specific. Any page with this style and position: fixed doesn't work properly.

So my question is, how can I enable hardware acceleration and at the same time have elements with position: fixed function properly?

stelioslogothetis
  • 9,371
  • 3
  • 28
  • 53
  • No clue without seeing your code. Also, please choose a different placeholder image, it is terrible on the eyes and will make me never come back to this thread. – Matthew Jul 27 '17 at 21:17
  • @Matthew My code is hardly relevant. This question applies to all pages that utilize css transitions and `position: fixed` elements. – stelioslogothetis Jul 27 '17 at 21:19
  • Create a working example then. It is relevant so we can know the structure of your html and what else if affecting this. You say that it has no style so then how are you getting the hamburger menu to be fixed? How are you applying the -webkit-transform? There is more going on which is why we need to see your code. Without that how do you expect us to debug it? – Matthew Jul 27 '17 at 21:29
  • @Matthew Very well, I have added a demo which shows the problematic behavior. – stelioslogothetis Jul 27 '17 at 22:01
  • After doing some playing around and some more research I found that the issue you are experiencing is also a well-known issue when using the `translate3D` basically it creates a new "local point" for the element it is applied to which is why you are getting that result. – Matthew Jul 27 '17 at 22:34
  • Is the color transition that is "choppy" in your nav? You may be able to add the `translate3d(0, 0 , 0);` property to your `main` element if that will be the wrapper for all the content on all of your pages. That might be worth giving a try if you haven't already. – Matthew Jul 27 '17 at 22:37
  • @Matthew No, the choppy transition is in my `main`. I have already tried adding the `translate3d` to the `main`, the `body`, and the `html` elements. – stelioslogothetis Jul 28 '17 at 11:37
  • Hmm.. how are you doing the change background color? Css animation or transition? On hover, scroll, or all the time? Have you tried to do the animation in a different way? – Matthew Jul 28 '17 at 14:43
  • @Matthew It is a transition that is triggered by JS after the user has scrolled past a certain point, by adding a class to the `main`. Can't get much simpler than that – stelioslogothetis Jul 28 '17 at 16:16

0 Answers0