I am trying to apply a backdrop blur on the header of my website (Made with NextJS and Tailwind). It works great on Firefox, Safari...
However, on Chrome, it is just random. sometimes, I catch it working, but then I scroll and it does not work anymore.
Firefox: Firefox Image of Blured Header
Chrome: Chrome Image of Blured Header
Here is my Code:
<div>
<header
className={`tw-flex tw-justify-between tw-items-center tw-p-4 tw-w-full md:tw-h-20 tw-font-mono tw-text-black dark:tw-text-white tw-gap-3 tw-fixed tw-z-50 ${useScrollDirection() == 'down' ? 'header-hidden' : 'header-show'}`}
>
<div
ref={menuRef}
className={`tw-backdrop-blur-xl md:tw-flex md:tw-h-full md:tw-justify-center md:tw-items-center tw-align-top tw-bg-[rgba(100,100,100,0.1)] dark:tw-bg-[rgba(150,150,150,0.1)] tw-grid tw-px-0 tw-py-1 tw-rounded-[20px] ${menu ? 'show-menu' : ''} ${menuIsHidden ? 'tw-hidden' : ''} menu tw-text-3xl tw-w-full md:tw-w-auto md:tw-mr-auto md:tw-ml-auto`}
>
{menuItems.map((item, index) => (
<Link
key={item}
href={`/#${item.toLowerCase()}`}
onClick={menu ? () => setShowMenu(false) : () => {}}
className={`tw-rounded-[20px] tw-py-2 tw-px-3 md:hover:tw-bg-[rgba(50,50,50,0.1)] dark:md:hover:tw-bg-[rgba(200,200,200,0.1)] icon-click`}
>
<p className={`glitch-word md:tw-text-2xl`}>
{item.split('').map((char, i) => (
<span key={i}>{char}</span>
))}
</p>
</Link>
))}
</div>
<div
className={`tw-flex tw-gap-3 tw-h-full ${icon ? '' : 'hide-icon'} ${iconIsHidden ? 'tw-hidden' : ''} header-icon tw-justify-between tw-w-full md:tw-w-auto`}
>
<div className="tw-flex tw-justify-center tw-items-center md:tw-hidden tw-bg-[rgba(100,100,100,0.1)] dark:tw-bg-[rgba(150,150,150,0.1)] tw-p-3 tw-rounded-full tw-aspect-square tw-h-12 md:tw-h-full md:hover:tw-bg-[rgba(50,50,50,0.1)] dark:md:hover:tw-bg-[rgba(200,200,200,0.1)] icon-click">
<button
className=""
onClick={() => {
setShowMenu(true);
}}
>
<Image
src={!dark ? menuDarkIcon : menuLightIcon}
alt="menu"
className="menu-icon"
/>
</button>
</div>
<div className="tw-flex tw-justify-center tw-items-center tw-bg-[rgba(100,100,100,0.1)] dark:tw-bg-[rgba(150,150,150,0.1)] tw-rounded-full tw-as tw-aspect-square tw-h-12 md:tw-h-full md:hover:tw-bg-[rgba(50,50,50,0.1)] dark:md:hover:tw-bg-[rgba(200,200,200,0.1)] icon-click">
<button
className="tw-p-2"
onClick={() => {
setIconRotate(true);
setTimeout(() => {
setDark((val) => !val);
setIconRotate(false);
}, 500);
}}
>
<Image
src={!dark ? moonIcon : sunIcon}
alt="toggle darkmode"
className={`themeIcon ${iconRotate ? 'icon-rotate' : ''}`}
/>
</button>
</div>
</div>
</header>
</div>
Trying Removing this class from header: header-show (This is the one might be conflicting).
From below:
<div>
<header
className={`tw-flex tw-justify-between tw-items-center tw-p-4 tw-w-full md:tw-h-20 tw-font-mono tw-text-black dark:tw-text-white tw-gap-3 tw-fixed tw-z-50 ${useScrollDirection() == 'down' ? 'header-hidden' : 'header-show'}`}
>
<div
ref={menuRef}
className={`backdrop-blur-xl md:tw-flex md:tw-h-full md:tw-justify-center md:tw-items-center tw-align-top tw-bg-[rgba(100,100,100,0.1)] dark:tw-bg-[rgba(150,150,150,0.1)] tw-grid tw-px-0 tw-py-1 tw-rounded-[20px] ${menu ? 'show-menu' : ''} ${menuIsHidden ? 'tw-hidden' : ''} menu tw-text-3xl tw-w-full md:tw-w-auto md:tw-mr-auto md:tw-ml-auto`}
>
{menuItems.map((item, index) => (
<Link
key={item}
href={`/#${item.toLowerCase()}`}
onClick={menu ? () => setShowMenu(false) : () => {}}
className={`tw-rounded-[20px] tw-py-2 tw-px-3 md:hover:tw-bg-[rgba(50,50,50,0.1)] dark:md:hover:tw-bg-[rgba(200,200,200,0.1)] icon-click`}
>
<p className={`glitch-word md:tw-text-2xl`}>
{item.split('').map((char, i) => (
<span key={i}>{char}</span>
))}
</p>
</Link>
))}
</div>
<div
className={`tw-flex tw-gap-3 tw-h-full ${icon ? '' : 'hide-icon'} ${iconIsHidden ? 'tw-hidden' : ''} header-icon tw-justify-between tw-w-full md:tw-w-auto`}
>
<div className="tw-flex tw-justify-center tw-items-center md:tw-hidden tw-bg-[rgba(100,100,100,0.1)] dark:tw-bg-[rgba(150,150,150,0.1)] tw-p-3 tw-rounded-full tw-aspect-square tw-h-12 md:tw-h-full md:hover:tw-bg-[rgba(50,50,50,0.1)] dark:md:hover:tw-bg-[rgba(200,200,200,0.1)] icon-click">
<button
className=""
onClick={() => {
setShowMenu(true);
}}
>
<Image
src={!dark ? menuDarkIcon : menuLightIcon}
alt="menu"
className="menu-icon"
/>
</button>
</div>
<div className="tw-flex tw-justify-center tw-items-center tw-bg-[rgba(100,100,100,0.1)] dark:tw-bg-[rgba(150,150,150,0.1)] tw-rounded-full tw-as tw-aspect-square tw-h-12 md:tw-h-full md:hover:tw-bg-[rgba(50,50,50,0.1)] dark:md:hover:tw-bg-[rgba(200,200,200,0.1)] icon-click">
<button
className="tw-p-2"
onClick={() => {
setIconRotate(true);
setTimeout(() => {
setDark((val) => !val);
setIconRotate(false);
}, 500);
}}
>
<Image
src={!dark ? moonIcon : sunIcon}
alt="toggle darkmode"
className={`themeIcon ${iconRotate ? 'icon-rotate' : ''}`}
/>
</button>
</div>
</div>
</header>