bootstrap 3D acceleration for offcanvas

3D acceleration for offcanvas

Open jasny opened this issue 10 years ago • 16 comments

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.

Feb 18 '14 12:02 jasny

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.

Feb 18 '14 14:02 jasny

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

Feb 26 '14 23:02 jasny

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

Apr 03 '14 14:04 jasny

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.

Apr 03 '14 15:04 lwensveen

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

Jan 04 '15 22:01 panoply

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

Apr 23 '15 07:04 gomoimihai

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.

Oct 06 '15 14:10 mmocarski

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

Oct 06 '15 22:10 jasny

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.

Oct 09 '15 01:10 panoply

I forked the code and rewrote the slide prototype to use velocity. I am seeing much smoother animations as a result. I recommend looking into it.