页面加载元素变黑，点击导航偶现背景全黑问题求助

问题描述 #

页面加载时HTML元素会短暂变黑后恢复正常，点击导航按钮时也会出现该现象；频繁点击Home导航按钮时，主页面背景偶尔也会变黑。已尝试调整脚本位置（body前后、head中）及添加async属性，问题未解决。

现象截图：

• 未点击导航时：
• 点击瞬间：

导航栏相关Razor代码：

@using Microsoft.AspNetCore.Mvc.TagHelpers
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>@ViewData["Title"] - Curriculum</title>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="~/css/site.css" asp-append-version="true"/>
    <link rel="stylesheet" href="~/Curriculum.styles.css" asp-append-version="true"/>
    <script src="~/lib/jquery/dist/jquery.min.js" async></script>
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js" async></script>
    <script src="~/js/site.js" asp-append-version="true" async></script>
</head>
<body>
<header>
    <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
        <div class="container-fluid">
            <a class="navbar-brand" asp-area="" asp-controller="Home" asp-action="Index">Curriculum</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target=".navbar-collapse" aria-controls="navbarSupportedContent"
                    aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                <ul class="navbar-nav flex-grow-1">
                    <li class="nav-item">
                        <a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
                    </li>
                    @if(User.IsInRole("Administrator"))
                    {
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Roles" asp-action="Index">Roles</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Courses" asp-action="Index">Courses</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Groups" asp-action="Index">Groups</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link text-dark" asp-area="" asp-controller="Teachers" asp-action="Index">Teachers</a>
                        </li>
                    }
                </ul>
                <partial name="_LoginPartial"/>
            </div>
        </div>
    </nav>
</header>
<div class="container">
    <main role="main" class="pb-3">
        @RenderBody()
    </main>
</div>

@await RenderSectionAsync("Scripts", required: false)
<footer class="border-top footer text-muted">
    <div class="container">
        &copy; 2024 - Curriculum - <a asp-area="" asp-controller="Home" asp-action="Privacy">Privacy</a>
    </div>
</footer>
</body>
</html>

排查与解决建议 #

• 修复脚本加载顺序与依赖问题：
  Bootstrap依赖jQuery，async属性会导致脚本加载顺序不可控，可能出现Bootstrap初始化时jQuery未加载完成，引发样式异常。建议移除所有脚本的async属性，并将脚本移至</body>标签前，确保依赖顺序正确：

  <!-- 移到body末尾 -->
  <script src="~/lib/jquery/dist/jquery.min.js"></script>
  <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="~/js/site.js" asp-append-version="true"></script>
  @await RenderSectionAsync("Scripts", required: false)
  

• 设置全局初始背景色：
  页面加载时如果没有明确设置body的背景色，浏览器会使用默认值，待CSS加载后才渲染白色背景，导致短暂变黑。在site.css最顶部添加：

  body {
      background-color: #ffffff !important;
      min-height: 100vh;
  }
  

• 检查site.js中的DOM操作：
  查看site.js是否存在页面加载或导航点击时修改元素背景/颜色的代码，比如错误的条件判断、未等待DOM就绪就执行样式修改。确保所有DOM操作包裹在$(document).ready()或DOMContentLoaded事件中：

  $(document).ready(function() {
      // 你的DOM操作代码
  });
  

• 预加载关键CSS资源：
  为减少CSS加载延迟，在<head>中添加预加载指令，优先加载核心样式：

  <link rel="preload" href="~/css/site.css" as="style" />
  <link rel="preload" href="~/lib/bootstrap/dist/css/bootstrap.min.css" as="style" />
  

• 排查浏览器硬件加速问题：
  部分浏览器硬件加速可能导致渲染闪烁，可尝试给导航栏或body添加CSS属性强制开启/禁用硬件加速测试：

  .navbar, body {
      transform: translateZ(0); /* 开启硬件加速 */
      /* 或禁用：transform: none; */
  }
  

• 检查服务器端渲染的样式冲突：
  确认Curriculum.styles.css或其他页面的局部样式是否存在覆盖body或导航栏背景色的规则，特别是动态生成的样式。

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