Safari浏览器移动端尺寸下刷新后全导航栏消失兼容问题求助

目前遇到的问题仅出现在Safari浏览器上，Chrome和Firefox运行完全正常，为保证最大可用性需修复该异常。预期效果与代码逻辑一致，但将页面调整到移动端尺寸后刷新再打开，整个导航栏就会消失。

相关代码 #

HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Jonathan's Homepage</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="stylesheet" type="text/css" href="index.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script src="nav.js" defer></script>

</head>

<body>
  <header class="primary-header flex">
    <div class="logo">
      <a href="index.html">
        <img class="img" src="./imges/beatlejuce.png" alt="logo">
      </a>
    </div>
    <button class="nav-toggle" aria-controls="ul-nav" aria-expanded="false">=</button>
    <nav>
      <ul id="ul-nav" data-visible="false" class="ul-navbar flex">
        <li><a href="index.html">home</a></li>
        <li><a href="code.html">code</a></li>
        <li><a href="photography.html">photography</a></li>
        <li><a href="random.html">random</a></li>
        <li><button onclick="location.href = 'login.html';" id="login" class="login">Login</button></li>
      </ul>
    </nav>
  </header>


</body>

</html>

CSS代码 #

:root {
  --background: rgba(50, 135, 242, 0.8);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
  background-color: lightblue;
  font-family: serif, sans-serif;
  font-weight: 400;
  display: grid;
  grid-template-rows: min-content 1fr;
  overflow-x: hidden;
}


/* logo样式 */

.img {
  height: 50px;
  width: 50px;
}

.logo {
  margin: 2rem;
}


/* 导航栏样式 */

.ul-navbar {
  display: block;
  padding: 0;
  margin: 0;
  text-align: left;
  position: relative;
  width: 100%;
  z-index: 999;
  list-style: none;
  background-color: hsl(0 0% 0%/ 0.3);
  visibility: visible;
}

.nav-toggle {
  display: none;
}

@supports (backdrop-filter: blur(1rem)) {
  .ul-navbar {
    background-color: hsl(0 0% 100%/ 0.1);
    backdrop-filter: blur(1rem);
  }
}


/* 登录按钮 */

.login {
  position: absolute;
  right: 30px;
  top: -32px;
}

.formDiv {
  position: absolute;
  top: 50%;
  left: 30%;
  display: flex;
  align-items: center;
}


/* 导航栏其他样式 */

.ul-navbar li {
  margin-left: 1em;
}

.ul-navbar a {
  color: darkgreen;
  text-decoration: none;
  font-size: 1.2rem;
  text-transform: uppercase;
}

.ul-navbar a:hover,
.ul-navbar a:focus {
  color: #222;
}

.flex {
  display: flex;
}


/* 主头部 */

.primary-header {
  align-items: center;
  justify-content: space-between;
}


/* 移动端适配 */

@media (max-width: 40em) {
  .ul-navbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 30%;
    flex-direction: column;
    padding: min(30vh, 10rem) 2rem;
    transform: translateX(100%);
  }
  /* JavaScript需要修改的样式 */
  .ul-navbar[data-visible="true"] {
    visibility: visible;
    transform: translateX(0%);
  }
  .nav-toggle {
    display: block;
    position: absolute;
    z-index: 9999;
    background: lightgreen;
    background-repeat: no-repeat;
    width: 2rem;
    height: 2rem;
    top: 2rem;
    right: 2rem;
  }
  .login {
    position: absolute;
    right: 500px;
  }
}

JS代码 #

$(document).ready(function() {
  const ulNav = document.querySelector(".ul-navbar");
  const navButt = document.querySelector(".nav-toggle");
  // 点击时检查可见性，若为"false"，则将CSS中的data-visible属性设为true，反之设为false
  navButt.addEventListener("click", () => {
    const vis = ulNav.getAttribute("data-visible");
    console.log(vis);
    if (vis === "false") {
      ulNav.setAttribute("data-visible", true);
    } else {
      ulNav.setAttribute("data-visible", false);
    }
  });
});

修复方案 #

该问题是Safari对属性选择器优先级、属性值类型的解析逻辑和Chrome、Firefox不一致导致的，按以下两步修改即可兼容：

1. 修改CSS移动端样式，补全隐藏状态的显式声明，避免Safari渲染异常：

@media (max-width: 40em) {
  .ul-navbar {
    position: fixed;
    z-index: 1000;
    top: 0;
    bottom: 0;
    right: 0;
    left: 30%;
    flex-direction: column;
    padding: min(30vh, 10rem) 2rem;
    transform: translateX(100%);
    visibility: hidden; /* 新增初始隐藏声明 */
    transition: transform 0.3s ease, visibility 0.3s ease; /* 可选新增，添加过渡效果避免闪烁 */
  }
  .ul-navbar[data-visible="true"] {
    visibility: visible;
    transform: translateX(0%);
  }
  /* 新增false状态显式声明，统一各浏览器表现 */
  .ul-navbar[data-visible="false"] {
    visibility: hidden;
    transform: translateX(100%);
  }
  /* 其余原有移动端样式保留 */
}

2. 修正JS属性赋值类型，统一使用字符串类型匹配HTML属性值：

$(document).ready(function() {
  const ulNav = document.querySelector(".ul-navbar");
  const navButt = document.querySelector(".nav-toggle");
  navButt.addEventListener("click", () => {
    const vis = ulNav.getAttribute("data-visible");
    if (vis === "false") {
      ulNav.setAttribute("data-visible", "true"); // 改为字符串类型
      navButt.setAttribute("aria-expanded", "true"); // 同步无障碍属性
    } else {
      ulNav.setAttribute("data-visible", "false"); // 改为字符串类型
      navButt.setAttribute("aria-expanded", "false"); // 同步无障碍属性
    }
  });
});

修改完成后刷新页面，Safari移动端下导航栏的显示逻辑就和其他浏览器完全一致了。

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