使用 Javascript 切换的导航栏汉堡的响应式下拉菜单适用于 Chrome、Firefox，但不适用于 Safari

Question

我正在使用 Javascript 中的切换创建响应式导航栏。 向下滚动 70vh 后会出现导航栏。 最大宽度为 768 像素时，响应性开始生效，单击时会出现一个带有下拉菜单的汉堡。

在 Chrome 和 Firefox 中一切正常——手动调整浏览器的大小并使用浏览器的移动设备模拟器。 但是在 Safari 和实际的移动设备（iPad、iPhone 7、iPhone 5）上，导航栏与汉堡一起出现，当我点击汉堡时，它会像预期的那样转换为“X”，但下拉菜单没有出现。

编辑以澄清：如果您查看下面的代码片段，这就是应该发生的事情。 这在 Chrome 和 Firefox 中确实会发生，但不会在实际的移动设备上发生。 相反，在移动设备上，当我按下汉堡时，它会变成一个“X”，但下拉菜单不会滑到屏幕上。

我花了一天多的时间试图弄清楚发生了什么。 我的 HTML 头部具有适合移动设备宽度的元标记，并且我尝试为 CSS 中的每个动画、变换、过渡和关键帧使用适当的 -moz、-webkit、-o 属性。 我找不到解决方案。 有人请给我扔救生衣，我正在下沉。

这是我的代码：

 const navSlide = () => { const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); // Toggle Nav burger.addEventListener('click', () => { nav.classList.toggle('nav-active'); //Animate Links navLinks.forEach((link, index) => { if (link.style.animation) { link.style.animation = '' } else { link.style.animation = `navLinkFade 0.5s ease forwards ${index / 5 + 0.5}s`; } }); // Burger Animation burger.classList.toggle('toggle'); }); } navSlide(); // navbar appears after scrolling let navbar = document.querySelector(".header-navigation"); if (navbar) { window.addEventListener("scroll", () => { if (window.scrollY >= window.innerHeight - 70) { navbar.classList.add('navbar-show'); } else { navbar.classList.remove('navbar-show') } }); }

 body { margin: 0px; padding: 0px; box-sizing: border-box; cursor: pointer; } .header-navigation { opacity: 0; } .wrapper { z-index: 1; position: relative; } .navbar-show { opacity: 1; transition: .4s ease-in-out; position: fixed; top: 0; width: 100%; height: 10vh; color: black; background-color: #5D4954; text-align: right; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; font-family: 'Muli', sans-serif; font-weight: 600; overflow: hidden; z-index: 9999; cursor: pointer; } nav { display: -webkit-flex; display: flex; -webkit-justify-content: space-around; justify-content: space-around; -webkit-align-items: center; align-items: center; height: 10vh; font-family: 'Muli', sans-serif; background-color: white; transition: .4s ease-in-out; box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px; cursor: pointer; } .logo { text-transform: uppercase; letter-spacing: 5px; font-size: 20px; color: black; } .nav-links { display: flex; justify-content: space-around; width: 40%; cursor: pointer; } .nav-links li { list-style: none; cursor: pointer; } .nav-links a { text-decoration: none; color: black; letter-spacing: 3px; font-size: 14px; display: block; cursor: pointer; /* font-weight: bold; */ } .burger { display: none; } .burger div{ width: 25px; height: 3px; background-color: black; margin: 5px; transition: all 0.3s ease; cursor: pointer; } @media screen and (max-width: 1024px){ .nav-links { width: 50%; } } @media screen and (max-width: 768px){ body{ /* overflow-x: hidden; */ } .nav-links { position: fixed; right: 0; height: 92vh; top: 8vh; background-color: #5D4954; display: -webkit-flex; display: flex; -webkit-flex-direction: column; flex-direction: column; -webkit-align-items: center; align-items: center; width: 50%; -webkit-transform: translateX(100%); -moz-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transition: transform 0.5s ease-in; -moz-transition: transform 0.5s ease-in; -o-transition: transform 0.5s ease-in; transition: transform 0.5s ease-in; cursor: pointer; } .nav-links li { opacity: 0; -webkit-animation: navLinkFade 0.5s ease forwards 1s; -moz-animation: navLinkFade 0.5s ease forwards 1s; -o-animation: navLinkFade 0.5s ease forwards 1s; -ms-animation: navLinkFade 0.5s ease forwards 1s; animation: navLinkFade 0.5s ease forwards 1s; cursor: pointer; } .burger { display: block; cursor: pointer; } } .nav-active { -webkit-transform: translateX(0); -moz-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); cursor: pointer; /* z-index: 9999; position: relative;*/ } @-webkit-keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0px); } } @-moz-keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0px); } } @-o-keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0px); } } @keyframes navLinkFade { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0px); } } .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); } .toggle .line2 { opacity: 0; } .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); } .banner { height: 100vh; background: grey; color: black; position: relative; text-align: center; } .banner h1 { padding-top: 300px; } .container1 { height: 92vh; background: white; color: black; position: relative; text-align: center; z-index: 2; } .container2 { height: 92vh; background: grey; color: black; position: relative; text-align: center; z-index: 3; }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>NAVIGATIOn</title> <link href="https://fonts.googleapis.com/css?family=Muli:200,300,400,600,700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="header-navigation"> <nav class="nav"> <div class="logo"> <h4>NAV</h4> </div> <ul class="nav-links"> <li><a href="#">Why a Website?</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> </div> <div class="banner"> <h1>Banner</h1> </div> <div class="container1"> <h1>Container1</h1> </div> <div class="container2"> <h1>Container2</h1> </div> <script src="javascript.js"></script> </body> </html>

Answer 1

您必须添加 -webkit-transition 和 -webkit-transform 前缀才能适用于移动设备。 为了在所有支持的浏览器中兼容，需要供应商前缀，最后声明标准语法：

.example {
-webkit-transition: background-color 500ms ease-out 1s;
-moz-transition: background-color 500ms ease-out 1s;
-o-transition: background-color 500ms ease-out 1s;
transition: background-color 500ms ease-out 1s; }

Answer 2

溢出似乎有些混乱。 尽量不要在你的 .navbar-show 中使用 overflow-hidden 🧐

这是一个 JSFiddle： https ://jsfiddle.net/RomanVanLoo/5ohva732/6/

body {


margin: 0px;
  padding: 0px;
  box-sizing: border-box;
  cursor: pointer;
}

.header-navigation {
  opacity: 0;
}

.wrapper {
  z-index: 1;
  position: relative;
}

.navbar-show {
  opacity: 1;
  transition: .4s ease-in-out;
  position: fixed;
  top: 0;
  width: 100%;
  height: 10vh;
  color: black;
  background-color: #5D4954;
  text-align: right;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  font-family: 'Muli', sans-serif;
  font-weight: 600;
  z-index: 9999;
  cursor: pointer;
}

nav {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-around;
  justify-content: space-around;
  -webkit-align-items: center;
  align-items: center;
  height: 10vh;
  font-family: 'Muli', sans-serif;
  background-color: white;
  transition: .4s ease-in-out;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 4px 12px 0px;
  cursor: pointer;
}

.logo {
  text-transform: uppercase;
  letter-spacing: 5px;
  font-size: 20px;
  color: black;
}

.nav-links {
  display: flex;
  justify-content: space-around;
  width: 40%;
  cursor: pointer;
}

.nav-links li {
  list-style: none;
  cursor: pointer;
}

.nav-links a {
  text-decoration: none;
  color: black;
  letter-spacing: 3px;
  font-size: 14px;
  display: block;
  cursor: pointer;
/*  font-weight: bold; */
}

.burger {
  display: none;
}

.burger div{
  width: 25px;
  height: 3px;
  background-color: black;
  margin: 5px;
  transition: all 0.3s ease;
  cursor: pointer;
}

@media screen and (max-width: 1024px){
  .nav-links {
    width: 50%;
  }
}

@media screen and (max-width: 768px){
  body{
/*    overflow-x: hidden;
*/  }
  .nav-links {
    position: fixed;
    right: 0;
    height: 92vh;
    top: 8vh;
    background-color: #5D4954;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-align-items: center;
    align-items: center;
    width: 50%;
      -webkit-transform: translateX(100%);
      -moz-transform: translateX(100%);
      -o-transform: translateX(100%);
    transform: translateX(100%);
      -webkit-transition: transform 0.5s ease-in;
      -moz-transition: transform 0.5s ease-in;
      -o-transition: transform 0.5s ease-in;
    transition: transform 0.5s ease-in;
    cursor: pointer;
  }
  .nav-links li {
    opacity: 0;
    -webkit-animation: navLinkFade 0.5s ease forwards 1s;
    -moz-animation: navLinkFade 0.5s ease forwards 1s;
    -o-animation: navLinkFade 0.5s ease forwards 1s;
    -ms-animation: navLinkFade 0.5s ease forwards 1s;
    animation: navLinkFade 0.5s ease forwards 1s;
    cursor: pointer;
  }
  .burger {
    display: block;
    cursor: pointer;
  }
}

.nav-active {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -o-transform: translateX(0);
  transform: translateX(0);
  cursor: pointer;
/*  z-index: 9999;
  position: relative;*/
}

@-webkit-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-moz-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@-o-keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

@keyframes navLinkFade {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0px);
  }
}

.toggle .line1 {
  transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
  opacity: 0;
}

.toggle .line3 {
  transform: rotate(45deg) translate(-5px, -6px);
}

.banner {
  height: 100vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
}

.banner h1 {
  padding-top: 300px;
}

.container1 {
  height: 92vh;
  background: white;
  color: black;
  position: relative;
  text-align: center;
  z-index: 2;
}

.container2 {
  height: 92vh;
  background: grey;
  color: black;
  position: relative;
  text-align: center;
  z-index: 3;
}