CODEWITHSUNDEEP
cssperformanceangulartransitionjank
Edgar Quintero
Edgar Quintero

Reputation: 4441

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

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

Upvotes: 0

Views: 291

Answers (1)

Edgar Quintero
Edgar Quintero

Reputation: 4441

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

Upvotes: 0

Related Questions