CSS Transition Animation Jank w/zindex on Mac (Retina)

Question

We have an Angular 4 web app with a sidenav. When clicking on the hamburger icon, the sidenav animates open from right to left by giving it a width via JS and a transition via CSS, and the main content div in the background is faded to a black with opacity.

The issue is the clunky opening animation, jank, on the opening and closing of the sidenav.

Please bare in mind I'm still a fairly new to Angular. The code is:

public openNav() {
    let offCanvas = document.getElementById('off-canvas-menu');
    let container = document.getElementById('main-wrapper-container');
    let openIndex = document.getElementById('main-view-container');

    offCanvas.style.width = "250px";
    openIndex.style.zIndex = '-1';

    setTimeout(function() {container.style.background = "rgba(0,0,0,0.4)"}, 200);

}

public closeNav() {
    document.getElementById('off-canvas-menu').style.width = "0";
    document.getElementById('main-wrapper-container').style.background = "inherit";
    let closeIndex = document.getElementById('main-view-container');
    setTimeout(function() { closeIndex.style.zIndex = 'auto'}, 300);
}

The reason I have it set up with zindex is because there seems to be an issue with the views from the other components. If I remove the zindex, then the transparent to black with opacity doesn't show up on top, it stacks below the main content. I've tried everything to get to stack right (playing with zindex in differnet divs, adding positioning in CSS) but not sure if this is an issue with Angular or if I missed something, or if the code above is just bad. If I remove the zindex the animation is smoother.

Also, this is more noticeable on Macs with Google Chrome and Safari (even more prevalent on a retina screen), on Firefox works ok, on Windows works ok.

Looking forward to any feedback!

HTML:

<span (click)="openNav()" id="open-off-canvas-menu-button" *ngIf="is_there_session()">
    <i class="fa fa-bars" aria-hidden="true"></i>
</span>

<div id="main-wrapper-container" (click)="closeNav()">
  <div id="main-view-container">
    <router-outlet></router-outlet>
  </div>
</div>

SASS:

#open-off-canvas-menu-button{
    position: fixed;
    top: 0;
    right:0;
    padding: 25px 18px 0 0;
    z-index: 500;
    i{
        display: inline-block;
        color: $gray-forty;
        transition: color 500ms ease-in-out;
        font-size: 18px;
    }

    &:hover {
        cursor: pointer;
    }
}


.off-canvas-menu {
    height: 100%;
    width: 0;
    position: fixed;
    top: 0;
    right: 0;
    background-color: $black;
    overflow-x: hidden;
    padding-top: 60px;
    @include transition(all .5s ease);
    z-index: 1000;
}

.off-canvas-menu a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 1.5rem;
    color: $gray-forty;
    display: block;
    width: 300px;
    @include transition(all .5s ease);
    &:hover {
        cursor: pointer;
    }
}

.off-canvas-menu a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.off-canvas-menu .closebtn {
    position: absolute;
    top: 5px;
    transform: translateX(60%);
    font-size: 36px;
}

#main-wrapper-container {
    position: relative;
    height: 100%;
    min-height: 100vh;
    width: 100%;
    @include transition(all .4s ease);
}

#main-view-container {
    position: relative;
}

You will get better performance if you transition/animate `transform: translate()/scale()` instead. But for a better solution, post the rendered html/css you're using, too, so we have a [mcve] of what you're working with currently. — Michael Coker, Jul 17 '17 at 21:00
You have a bunch of variables and stuff in your sass that doesn't work, but even if I replace them, your code doesn't provide a [mcve]. Can you update this to make it work and replicate the problem? https://codepen.io/mcoker/pen/VWOaXL — Michael Coker, Jul 17 '17 at 21:12
from https://stackoverflow.com/help/on-topic *"Questions seeking debugging help ("why isn't this code working?") must include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it in the question itself. See: How to create a [mcve].*" — Michael Coker, Jul 17 '17 at 21:13

score 0 · Accepted Answer · answered Jul 19 '17 at 14:56

Fairly simple, I just changed from increasing the width of the side nav, to using ScaleX... and the jank reduced drastically.

.off-canvas-menu {
    height: 100%;
    transform: scaleX(0);
    transform-origin: 100% 50%;
    width: 250px;
    position: fixed;
    top: 0;
    right: 0;
    background-color: $black;
    overflow-x: hidden;
    padding-top: 60px;
    @include transition(all .5s ease);
    z-index: 1000;
}

CSS Transition Animation Jank w/zindex on Mac (Retina)

1 Answers1