Chrome 上的背景模糊问题

Question

我正在尝试在我的网站标题上应用背景模糊（使用 NextJS 和 Tailwind 制作）。它在 Firefox、Safari 上运行良好...

但是，在 Chrome 上，它只是随机的。有时，我发现它在工作，但当我滚动时，它就不再工作了。

火狐： 模糊标题的 Firefox 图像

铬： 模糊标题的 Chrome 图像

这是我的代码：

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

Answer 1

尝试将“tw-backdrop-blur-xl”更改为“backdrop-blur-xl”

如下：

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