3D acceleration for offcanvas

jasny / bootstrap

The missing components for your favorite front-end framework.

https://www.jasny.net/bootstrap/

Apache License 2.0

2.68k stars 496 forks source link

3D acceleration for offcanvas #186

Open jasny opened 10 years ago

jasny commented 10 years ago

The animation when using the off canvas plugin, could be smoother with 3D GPU accelaration. However adding translate3d to the canvas, causes serious issues with fixed elements as descried in this article.

jasny commented 10 years ago

It looks like setting backface-visibility: hidden does the trick. I've confirmed this only for chrome, using the fps-counter.

.3d-accelerate {  
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

The FPS counter doesn't show up with only transition. It does shows up when adding transform: translate3d(0, 0, 0). It also shows up with just backface-visibility: none.

jasny commented 10 years ago

With backface-visibility some items seem to be hidden. Another property that might work is perspective, though this option also has some side-effects.

jasny commented 10 years ago

A workaround for people have issues with jagged annimations. You can use a .canvas div and place all non-fixed content in there. You can specify multiple objects as data-canvas.

<body>
  <div class="navbar navbar-fixed-top">...</div>
  <div class="navmenu navmenu-fixed-left offcanvas">...</div>

  <div class="canvas">
    <p>Hello world</p>
    <button type="button" class="navbar-toggle" data-toggle="offcanvas" data-target=".navmenu" data-canvas=".canvas, .navbar">Show</button>
  </div>

  <div class="modal">...</div>
</body>

Add CSS

.canvas.canvas-sliding {
  transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
}

lwensveen commented 10 years ago

This doesn't appear to fix it in my case. The animation isn't jagged in my case, the animation seems to start at the proper speed (350ms) for about 10px - 15px and then it just moves to the right.

I copied the exact html you supplied on your examples page. I just changed the navbar-brand to use a image instead of text and added a input field into the offcanvas menu.

panoply commented 9 years ago

Any updates on this? Can we instead use javascript for the animations instead of the css3 property?

gomoimihai commented 9 years ago

Hi @Panoply, have you found a fix for this?

mmocarski commented 9 years ago

Any updates on this? There has to be a way to improve the animation to some extent. I've tried the CSS fix you posted, but on a mobile device (the primary use-case for a push nav), the animation isn't very smooth. As @Panoply mentioned, if there is a way to use JS instead of the CSS3 property I think that would perform better for the mobile use-case.

jasny commented 9 years ago

@mmocarski Bootstrap checks support for css transitions. You set this to false to force jQuery animations. This is than used for all Bootstrap plugins, not only offcanvas.

$.support.transition = false;

panoply commented 9 years ago

Bootstrap was dropped because offcanvas was just not fluent enough on mobile. Even several years on. Bootstrap 4 also has a slow offcanvas method. My advice: Extract the drawers from timber.js and boycott Bootstrap offcanvas all together.