Tailwind blur类渲染异常：Chrome/Edge不生效，Firefox正常

API 探路者

2026-7-27

问题描述

从Chrome迁移到Edge后，项目中Tailwind的blur类在Chrome和Edge里失效，但Firefox正常渲染，其余Tailwind类均工作正常。

已尝试的解决手段

网络搜索同类问题，未找到相关结果
新建项目测试图片模糊效果，所有浏览器均正常工作
重新克隆项目，问题仍未解决

项目环境细节

Next.js TypeScript v13.2.1（启用实验性app目录）
使用yarn包管理器
Tailwind v3.2.7
Edge浏览器
使用turbopack

预期与实际效果

预期：背景图片被模糊处理
实际：Chrome和Edge中图片未被模糊，仅Firefox正常生效

相关代码（src/app/page.tsx）

"use client"

import Image from "next/image"
import Button from "@/component/ui/Button"
import Blob from "@/component/blob/Blob"
import { Canvas } from "@react-three/fiber"
import { useEffect, useState } from "react"
import Badge from "@/component/ui/Badge"
import { GithubCircle, Instagram, ArrowRight } from "iconoir-react"
import Link from "next/link"

const Home = () => {
    const [isContentVisible, setIsContentVisible] = useState(false)

    useEffect(() => {
        const timeout = setTimeout(() => {
            setIsContentVisible(true)
        }, 500)

        return () => {
            clearTimeout(timeout)
        }
    }, [])

    return (
        <main className="flex flex-col justify-between min-h-screen p-8 mx-auto bg-black max-w-7xl min-w-screen md:min-w-3xl">
            <header
                className={`flex flex-row justify-between h-10 items-center bg-transparent z-10 opacity-0 transform -translate-y-full transition-all duration-1000 ${
                    isContentVisible ? "opacity-100 translate-y-0" : ""
                }`}
            >
                <Image
                    src="/logo.svg"
                    alt="logo Logo"
                    width={96}
                    height={18}
                    priority
                />
                <div className="flex flex-row space-x-4">
                    <Link href="/auth/login">
                        <Button intent="default">
                            <span className="flex flex-row items-center gap-2">
                                Log in
                                <ArrowRight className="transition ease-in-out hover:translate-x-1" />
                            </span>
                        </Button>
                    </Link>
                    <Button intent="subtle">
                        <span>Join waitlist</span>
                    </Button>
                </div>
            </header>
            <section
                className={`flex flex-row items-center justify-between opacity-0 transform transition-all duration-[3000ms] ${
                    isContentVisible ? "opacity-100" : ""
                }`}
            >
                <div className="absolute z-10">
                    <Image
                        src="abstract.svg"
                        alt="abstract"
                        width={544.63}
                        height={136.5}
                        className="blur-2xl"
                        priority
                    />
                </div>
                <div className="z-20 flex flex-col max-w-xl gap-3">
                    <div>
                        <Badge intent="warning" text="Currently in development" />
                    </div>
                    <h1 className="inline-block font-bold leading-none text-transparent text-7xl bg-gradient-to-br from-white to-zinc-800 bg-clip-text md:text-6xl sm:text-5xl">
                        Reclaim your wasted hour
                    </h1>
                    <p className="text-base font-normal leading-6 text-grayDark-11">
                        Take your productivity to the next level with advanced tools
                        designed to help you streamline your work, maximize your time, and
                        accomplish more than ever before.
                    </p>
                </div>
                <div className="h-[40rem] w-[48rem] transform-gpu lg:block hidden">
                    <Canvas camera={{ position: [0.0, 1.0, 9.0] }}>
                        <Blob />
                    </Canvas>
                </div>
            </section>
            <footer
                className={`opacity-0 transform translate-y-full transition-all duration-1000 ${
                    isContentVisible ? "opacity-100 translate-y-0" : ""
                }`}
            >
                <div className="flex flex-row items-center gap-6">
                    <Link
                        href="https://github.com/my-brand/logo"
                        target="_blank"
                        className="transition duration-200 ease-in-out bg-clip-text text-grayDark-10 hover:text-whiteA-12"
                    >
                        <GithubCircle strokeWidth={1} width="1.5rem" height="1.5rem" />
                    </Link>
                    <Link
                        href="https://instagram.com/my-brand"
                        target="_blank"
                        className="transition duration-200 ease-in-out bg-clip-text text-grayDark-10 hover:text-whiteA-12"
                    >
                        <Instagram strokeWidth={1} width="1.5rem" height="1.5rem" />
                    </Link>
                </div>
            </footer>
        </main>
    )
}

export default Home

解决方案建议

禁用Next.js Image优化
Next.js Image默认的图片优化可能与模糊效果冲突，尝试添加unoptimized属性：

<Image
    src="abstract.svg"
    alt="abstract"
    width={544.63}
    height={136.5}
    className="blur-2xl"
    priority
    unoptimized
/>

替换为原生img标签
如果上述方法无效，直接使用原生img标签测试：

<img
    src="/abstract.svg"
    alt="abstract"
    width={544.63}
    height={136.5}
    className="blur-2xl"
/>

关闭turbopack测试
当前turbopack可能存在兼容性问题，切换回webpack开发服务器：

yarn dev --no-turbopack

升级依赖版本
更新Next.js和Tailwind到最新稳定版，修复已知bug：

yarn add next@latest tailwindcss@latest postcss@latest autoprefixer@latest

添加transform触发渲染
部分浏览器需要元素有transform属性才能正确应用模糊，给图片容器添加强制渲染属性：

<div className="absolute z-10 transform translate-z-0">
    <Image
        src="abstract.svg"
        alt="abstract"
        width={544.63}
        height={136.5}
        className="blur-2xl"
        priority
    />
</div>

内容的提问来源于stack exchange，提问作者Andrew Virya Victorio