Drawer flickering

[luki922]

As in title, drawer flickering when the page loads or is refreshed

How to fix it? I use 1.5.2 version

screencast-127.0.0.1_8000-2022.08.12-14_34_36.webm .

[n-tsukiya]

me, too(I use 1.5.1)

[gluzio]

Me too!

[zoltanszogyenyi]

Hello @luki922, @n-tsukiya, @gluzio,

Can you please give me a code example so that I can better understand what's happening?

[luki922]

Hello @zoltanszogyenyi I don't have this code anymore, but get the code from component: Drawer Only at the moment of refreshing/reloading does this problem occur. I think there is a solution: https://github.com/themesberg/flowbite/pull/228 but you need to check it

[cswinslow]

It occurs using the code copied directly from any of the component examples. Flowbite v1.5.3, in my project, in being loaded at the head, but I've already tried from the bottom of the body just to make sure it wasn't a loading issue.

The only way I was able to resolve the flickering issue, without introducing any code to the page using the Drawer, was by adding the hidden class to my Drawer component:

<div id="drawer-example" class="hidden fixed z-40 h-screen p-4 overflow-y-auto bg-white w-80 dark:bg-gray-800" tabindex="-1" aria-labelledby="drawer-label">
    ...

Then modifying the Flowbite plugin to remove the hidden class on initialization:

class Drawer {
    ...

    _init() {
        // set initial accessibility attributes
        if (this._targetEl) {
            this._targetEl.setAttribute('aria-hidden', 'true')
            this._targetEl.classList.add('transition-transform')
        }

        // set base placement classes
        this._getPlacementClasses(this._options.placement).base.map(c => {
            this._targetEl.classList.add(c)
        })

        // remove hidden class
        this._targetEl.classList.remove('hidden')

        // hide by default
        this.hide()
    }

    ...

This can be done in other ways, such as an inline <script> to remove the class after the DOM loads, but this way was more suitable for my needs to make it universal.

[Mghobadid]

I inspired this from bootstrap offcanvas hope help you. 1-replace _getPlacementClasses function content in drawer.js by this switch (placement) { case 'top': return { base: ['top-0', 'left-0', 'right-0'], active: ['transform-none', 'visible'], inactive: ['-translate-y-full'] } case 'right': return { base: ['right-0', 'top-0'], active: ['transform-none', 'visible'], inactive: ['translate-x-full'] } case 'bottom': return { base: ['bottom-0', 'left-0', 'right-0'], active: ['transform-none', 'visible'], inactive: ['translate-y-full', 'invisible'] } case 'left': return { base: ['left-0', 'top-0'], active: ['transform-none'], inactive: ['-translate-x-full', 'invisible'] } case 'bottom-edge': return { base: ['left-0', 'top-0'], active: ['transform-none', 'visible'], inactive: ['translate-y-full', this._options.edgeOffset, 'invisible'] } default: return { base: ['left-0', 'top-0'], active: ['transform-none'], inactive: ['-translate-x-full', 'invisible'] } } 2- add invisible class to drawer Html component

[officialrj18]

I am also having the same issue in the gatsby, whenever page loads it shows drawers for a second then goes back to a place where i want it to be. I have included js file for it , still not working. Need urgent help in it

[zoltanszogyenyi]

Hello everyone,

This will be addressed for the v1.6.0 update. Thanks!

[officialrj18]

Th

Hello everyone,

This will be addressed for the v1.6.0 update. Thanks!

Hi, thanks for addressing this issue, When can we expect this version(1.6.0) to release?

[zoltanszogyenyi]

Hey peeps,

This will be addressed in v1.6.1 shortly because we want to focus on bug fixes now after releasing the TypeScript integration - I believe that the hidden class method will be the best one to apply natively.

ETA 1-2 days!

[zoltanszogyenyi]

Hey peeps,

This has been fixed by applying by default the hidden classes (ie. off-canvas utility classes) to the examples.

Commit: https://github.com/themesberg/flowbite/commit/ca4ef02e2fd70244ab464cbfd6758134193260e8

[zoltanszogyenyi]

Fixed in Flowbite v1.6.1 release.

[liseipi]

Fixed in Flowbite v1.6.1 release.

Still can't auto hide @zoltanszogyenyi

[cswinslow]

@liseipi

Following the new examples provided in the documentation, and using transition-transform left-0 top-0 -translate-x-full, it seems to be working for me. I haven't seen any flickering since converting my Drawer components over.

Also note (because I'm coming from Flowbite 1.5.3): I had to change data-drawer-dismiss="{id}" to data-drawer-hide="{id}". That messed me up for a little while, as well.

[liseipi]

Following the new examples provided in the documentation, and using transition-transform left-0 top-0 -translate-x-full, it seems to be working for me. I haven't seen any flickering since converting my Drawer components over.

Also note (because I'm coming from Flowbite 1.5.3): I had to change data-drawer-dismiss="{id}" to data-drawer-hide="{id}". That messed me up for a little while, as well.

@cswinslow ，Thank you, it's normal now

[ponponwu]

I'm using version 1.8.1, and still flickering, any one?

[ohrrkan]

confirm on 1.8.1 despite 'transition-transform left-0 top-0 -translate-x-full'.