整个Nav在为safari刷新时消失
整个Nav在为safari刷新时消失
提问于 2021-11-30 15:29:35
我现在的问题是在safari (是的，我知道没有多少人会使用这个浏览器，但我想要最大程度的可用性，导航消失是一个奇怪的问题)，chrome和firefox工作得很好，但只是safari才是一个奇怪的问题。应该发生的是代码片段中发生的事情，但是当我缩短页面(比如移动设备的大小)时，刷新并重新打开它，我的整个导航器就会消失。
消失导航图
$(document).ready(function() {
const ulNav = document.querySelector(".ul-navbar");
const navButt = document.querySelector(".nav-toggle");
//on click visibility is checked, if its "false", the data-visible attribute in css would be set to true and if its "true" it would be set to 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);
}
});
});: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-work */
.img {
height: 50px;
width: 50px;
}
.logo {
margin: 2rem;
}
/* nav starts here */
.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 */
.login {
position: absolute;
right: 30px;
top: -32px;
}
.formDiv {
position: absolute;
top: 50%;
left: 30%;
display: flex;
align-items: centeR;
}
/* rest of navbar */
.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;
}
/* p-head */
.primary-header {
align-items: center;
justify-content: space-between;
}
/* for mobile devices */
@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%);
}
/* what the javscript should be changing */
.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;
}
}<!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>
回答 1
Stack Overflow用户
发布于 2021-12-06 02:10:39
您可能需要为Safari使用正确的供应商前缀。对于Safari，它是-webkit-。下面是指向供应商前缀的MDN页面的链接：https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix
下面是在JS小提琴中测试的对我有效的媒体查询：@-webkit-media(){}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70171874
复制相关文章
相似问题
腾讯云开发者
