From a8ac4f9dd4bbb0e747e6f95514df9b1bb6f5b4e7 Mon Sep 17 00:00:00 2001
From: Cromwell Bayon <omelsoft@gmail.com>
Date: Wed, 25 Aug 2021 11:09:45 +0800
Subject: [PATCH] Fix Flickering issue

Flickering Issue when moving up and down a scrollable document while the sidebar is open

See: https://github.com/SidebarJS/angular-sidebarjs/issues/7


This is generated when updating the sidebarjs.scss file and compile the CSS.

Added the following in the --is-moving class:

[sidebarjs-container] {
            transform: none!important;
        }

in the following.

[sidebarjs] {
    @extend %component--full-screen;
    position: fixed;
    z-index: 9999;
    transition: transform 0s $timing $duration;
    &.sidebarjs--is-visible {
        @include component--is-visible;
    }
    &.sidebarjs--is-moving {
        transition: none;
        transform: translate(0, 0);
        **[sidebarjs-container] {
            transform: none!important;
        }**
        [sidebarjs-container],
        [sidebarjs-backdrop] {
            transition: none;
        }
    }
}
The issue is that every time the user moves up and down the transform property always gets updated. That's the reason for the flickering issue. To fix that, I added an override to force the transform to none.
---
 src/sidebarjs.scss | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/sidebarjs.scss b/src/sidebarjs.scss
index aafaf61..6f2407e 100644
--- a/src/sidebarjs.scss
+++ b/src/sidebarjs.scss
@@ -87,6 +87,9 @@ $width: 300px;
   &.sidebarjs--is-moving {
     transition: none;
     transform: translate(0, 0);
+    [sidebarjs-container] {
+      transform: none!important;
+    }
     [sidebarjs-container], [sidebarjs-backdrop] {
       transition: none;
     }