Chromium新版本更新致背景出现异常线条问题求助

现象描述 #

• 个人网站此前运行正常，Chromium浏览器更新后，背景出现异常线条
• 仅在使用模糊背景时出现该问题，纯色背景下无异常

正常网站背景：

更新后异常网站背景：

技术栈与核心代码 #

使用Tailwind CSS、Next.js、React实现背景效果，核心代码如下：

return (
    <html lang="en" className="!scroll-smooth">
        <body className={`${montserrat.className} pt-28 sm:pt-36 bg-gray-300 dark:bg-devil`}>
            <div className="bg-[#fbe2e3] dark:bg-[#671f91a8] absolute top-[1rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem]"></div>
            <div className="bg-[#dbd7fb] dark:bg-[#48457c] absolute top-[9rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem]"></div>

            <ThemeContextProvider>
                <ActiveSectionContextProvider>
                    <Header />
                    {children}
                    <Footer />

                    <Toaster
                        position="top-right"
                        containerStyle={{
                            top: "5rem",
                        }}
                    />
                    <ThemeSwitch />
                </ActiveSectionContextProvider>
            </ThemeContextProvider>
        </body>
    </html>
)

疑问 #

这是Chromium的bug吗？是否有修复方法？尝试过调整宽度为100%等操作，无效果。

这大概率是Chromium最新版本的渲染bug，这类问题通常和blur()滤镜与大尺寸、圆形定位元素的组合渲染有关，浏览器GPU渲染管线在处理高模糊值的元素时可能出现精度偏差。

可行修复方案： #

• 添加微小旋转角度：给模糊元素添加rotate-0.5（Tailwind类）或transform: rotate(0.1deg)，打破渲染对齐规律，避免线条生成：

  <div className="bg-[#fbe2e3] dark:bg-[#671f91a8] absolute top-[1rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] rotate-0.5"></div>
  <div className="bg-[#dbd7fb] dark:bg-[#48457c] absolute top-[9rem] -z-10 left-[-35rem] h-[31.25rem] w-[50rem] rounded-full blur-[10rem] sm:w-[68.75rem] md:left-[-33rem] lg:left-[-28rem] xl:left-[-15rem] 2xl:left-[-5rem] rotate-0.5"></div>
  

• 微调模糊值或元素尺寸：将blur-[10rem]改为blur-[9.8rem]/blur-[10.2rem]，或把元素宽高调整为非整数（如h-[31.3rem]），规避渲染精度问题。
• 强制硬件加速优化：添加translate-z-0（Tailwind类）或transform: translateZ(0)，强制GPU重新计算渲染路径：

  <div className="bg-[#fbe2e3] dark:bg-[#671f91a8] absolute top-[1rem] -z-10 right-[11rem] h-[31.25rem] w-[31.25rem] rounded-full blur-[10rem] sm:w-[68.75rem] translate-z-0"></div>
  

• 替换模糊实现方式：若上述方法无效，可尝试用backdrop-filter或SVG滤镜替代原生blur，绕开浏览器渲染bug。

验证建议 #

在Edge、Brave等其他Chromium内核浏览器的最新版本中测试，若同样出现问题，基本可确认是Chromium通用渲染bug，后续浏览器更新大概率会修复。

内容的提问来源于stack exchange，提问作者Niferu