Next.js网站在Facebook/LinkedIn WebView中背景显示异常绿色问题

我开发的Next.js网站在Facebook或LinkedIn的WebView中打开时，背景会变成怪异的亮绿色；但在Twitter、Instagram等其他应用的WebView里，能正常显示全局CSS中定义的线性渐变背景。我试过单独定义渐变类来修复，但没解决问题。

相关代码说明：
（问题截图显示页面背景为异常亮绿色）

global.css 代码 #

:root {
    --foreground-rgb: 255, 255, 255;
    --background-start-rgb: 40, 219, 20;
    --background-end-rgb: 31, 108, 63;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 255, 255, 255;
        --background-end-rgb: 31, 108, 63;
    }
}

body {
    color: rgb(var(--foreground-rgb));
    background-color: rgb(
        var(--background-start-rgb)
    ); /* 默认背景色 */
}

.gradient-background {
    min-height: 100vh;
    background: linear-gradient(
            to bottom,
            transparent,
            rgb(var(--background-end-rgb))
        )
        rgb(var(--background-start-rgb));
}

页面结构代码 #

<html lang="en">
<body>
    <div className="gradient-background">{children}</div>
</body>
</html>

1. 替换CSS变量为直接的十六进制颜色 #

Facebook/LinkedIn的WebView对rgb()中嵌套CSS变量的解析存在兼容性bug，直接用十六进制颜色可规避该问题：

:root {
    --foreground: #ffffff;
    --background-start: #28db14;
    --background-end: #1f6c3f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground: #ffffff;
        --background-start: #ffffff;
        --background-end: #1f6c3f;
    }
}

body {
    color: var(--foreground);
    background-color: var(--background-start);
}

.gradient-background {
    min-height: 100vh;
    background: linear-gradient(to bottom, transparent, var(--background-end)) var(--background-start);
}

2. 强制覆盖WebView默认样式 #

给body设置margin:0并强制高度为100%，避免WebView默认边距或高度导致背景漏出：

body {
    margin: 0;
    min-height: 100vh;
    color: var(--foreground);
    background-color: var(--background-start);
}

3. 添加WebKit前缀兼容旧版引擎 #

Facebook和LinkedIn的WebView基于旧版WebKit，添加-webkit-前缀可确保渐变被正确识别：

.gradient-background {
    min-height: 100vh;
    background: -webkit-linear-gradient(to bottom, transparent, var(--background-end)) var(--background-start);
    background: linear-gradient(to bottom, transparent, var(--background-end)) var(--background-start);
}

4. 排查暗色模式规则冲突 #

你的暗色模式规则将--background-start-rgb设为白色，但异常亮绿色更接近默认的--background-start-rgb（40,219,20），可能WebView颜色模式识别逻辑异常。可先注释暗色模式规则测试：

/* @media (prefers-color-scheme: dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 255, 255, 255;
        --background-end-rgb: 31, 108, 63;
    }
} */

5. 简化DOM结构 #

将渐变类直接绑定到body上，避免嵌套div可能带来的渲染问题：

<html lang="en">
<body className="gradient-background">{children}</body>
</html>

同步修改CSS：

.gradient-background {
    min-height: 100vh;
    margin: 0;
    color: var(--foreground);
    background: -webkit-linear-gradient(to bottom, transparent, var(--background-end)) var(--background-start);
    background: linear-gradient(to bottom, transparent, var(--background-end)) var(--background-start);
}

1. 应用修改后打包Next.js项目
2. 通过Facebook/LinkedIn分享功能打开网站，检查背景显示是否正常

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