Skip to content
This repository was archived by the owner on Dec 29, 2022. It is now read-only.

Conversation

@omelsoft
Copy link

@omelsoft omelsoft commented Mar 7, 2019

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

@lorenzodianni
Copy link
Member

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants