angular-sidebarjs icon indicating copy to clipboard operation
angular-sidebarjs copied to clipboard

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

Open omelsoft opened this issue 6 years ago • 1 comments

The issue is that every time the user moves up and down or left to right, the transform property always gets updated. That's the reason of the flickering issue. To fix that, I added an override to force the [sidebarjs-container] transform property to none.

This is generated when updating the sidebarjs.scss file and compiled the css in the main sidebarjs package.

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

omelsoft avatar Mar 07 '19 08:03 omelsoft

Hi @omelsoft, thank you for your PR! Can you move this PR in the core repo and apply your fix only in src files?

lorenzodianni avatar Aug 24 '21 23:08 lorenzodianni