“菜单”图标在桌面版Safari或移动版上完全没有显示

Question

这是我为735px或更小的窗口尺寸创建的移动菜单。移动菜单图标（右上角）不会在桌面版Safari或任何移动浏览器（包括Chrome和Safari）中显示。我有一种感觉，我可能忽略了一些显而易见的事情，但是我无法弄清楚。

可能与overflow：hidden有关吗？我发现，如果在我的类.mobilenav中将其禁用，则会显示菜单图标，但是显然，关闭图标也是如此。如果这是问题的根源，如何在保持菜单功能不变的情况下解决它？

它可以在台式机上运行的浏览器：Chrome 75.0.3770.142，Firefox 68.0，Edge 42.17134.1.0无法在桌面上运行的浏览器：Safari 12.1.1在移动设备上，它似乎无法在任何浏览器上运行。我同时检查了Safari和Chrome。

// BEGIN MOBILE NAV
function openMobile() {
  document.getElementById("myMobilenav").style.width = "100%";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}

function closeMobile() {
  document.getElementById("myMobilenav").style.width = "0";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV

//  MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("mobileactive");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

document.getElementById("myMobilenav").ontouchmove = function(e) {
  e.preventDefault();
}

body {
  margin: 0;
}

@media (max-width:735px) {
  .nav {
    display: none;
  }
  .navcontainer {
    display: none;
  }
  header.Header.Header--top {
    display: none;
  }
}


/* END MAIN NAV STYLE */

.mobilehead {
  width: 120px !important;
  display: block;
  margin-left: 10px;
  padding-top: -10px;
}

#mobilehead {
  width: 100%;
  height: 80px;
  background-color: #e9e5fb;
  border-bottom: solid 1px #000;
  margin-bottom: 80px;
}


/* BEGIN MOBILE NAV STYLE */

.mobilenavcontainer {
  height: 100%;
  width: 0px;
  background-color: #e9e5fb;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 997;
}

#mobilemenuicon {
  width: 80px;
  height: auto;
  z-index: 5000;
}

.mobilenav .mobilemenuicon {
  top: 20px;
  right: 18px;
  position: fixed;
  z-index: 50000;
}

#mobilecloseicon {
  width: 80px;
}

.mobilenav .mobileclosebtn {
  top: 20px;
  right: 18px;
  margin-left: 10px;
  position: absolute;
}

.mobilenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #e9e5fb;
  overflow: hidden;
  padding-top: 120px;
  font-family: "AmerigoBT";
}

.mobilemainitems a {
  text-decoration: none;
  font-size: 3em;
  color: #000;
  display: block;
  -webkit-text-stroke: .75px #000;
  -webkit-text-fill-color: #e9e5fb;
  line-height: 50px;
  width: 180px;
}

.mobilemainitems {
  padding-left: 30px;
  padding-top: 0px;
  margin-top: -96px;
}

.mobilesocialitems a {
  text-decoration: none;
  font-size: 1.5em;
  color: #000;
  display: inline-block;
  font-weight: 400;
}

.mobilesocialitems {
  padding-left: 30px;
  line-height: 35px;
  top: 480px;
  position: absolute;
}

.row1social {
  padding-left: 50px;
  display: block;
  width: 250px !important;
}


/* dropdown button */

.mobile-dropdown-btn {
  font-family: "AmerigoBT";
  text-decoration: none;
  font-size: 18px !important;
  color: #000;
  display: block;
  transition: 0.3s;
  line-height: 54px;
  border: none;
  background: none;
  width: 200px;
  text-align: left;
  outline: none;
  margin-left: -11px !important;
  padding-bottom: 5px;
}


/* active class for active dropdown button */

.mobileactive a {
  background-color: none;
  -webkit-text-stroke: .75px #000 !important;
  -webkit-text-fill-color: #e9e5fb !important;
}


/* dropdown container */

.mobile-dropdown-container {
  display: none;
  background-color: none;
  padding-left: 20px;
  font-family: "UniversEx";
  font-size: 11px;
  padding-bottom: 20px;
}

.mobile-dropdown-container a {
  line-height: 32px;
  -webkit-text-fill-color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

.mobile-dropdown-container a:hover {
  color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

@media (min-width:736px) {
  .mobilenav {
    display: none;
  }
  .mobilenavcontainer {
    display: none;
  }
  #mobilehead {
    display: none !important;
  }
}

<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>

<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
  <a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a>
  <div class="mobilemainitems">
    <button class="mobile-dropdown-btn"><a href="#">Journal</a></button>
    <div class="mobile-dropdown-container">
      <a href="/journal">all</a>
      <a href="/journal?category=design">design</a>
      <a href="/journal?category=fashion">fashion</a>
      <a href="/journal?category=personal">personal</a>
      <a href="/journal?category=swoon">swoon</a>
      <a href="/journal?category=travel">travel</a>
    </div>
    <a href="/work">Work</a>
    <a href="/about">About</a>
    <a href="#">Contact</a>
  </div>
  <div class="mobilesocialitems">
    <div class="row1social">
      <a href="#" target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Instagram</a>
    </div>
    <div class="row2social">
      <a href="#" target="_blank">Pinterest</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Magazine</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Spotify</a>
    </div>
  </div>
</div>

<div class="mobilenavcontainer">
  <span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->

Answer 1

不确定为什么要嵌套固定位置的元素，但是无论出于什么原因，Safari都会因为它的层而迷路。

添加以下内容可以解决您在Safari和移动设备上的问题...

.mobilenavcontainer > .mobilenav {
  position: relative;
}

// BEGIN MOBILE NAV
function openMobile() {
  document.getElementById("myMobilenav").style.width = "100%";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}

function closeMobile() {
  document.getElementById("myMobilenav").style.width = "0";
  document.getElementById("myMobilenav").style.borderLeft = "none";
}
// END MOBILE NAV

//  MOBILE DROPDOWN
//* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content\*/
var dropdown = document.getElementsByClassName("mobile-dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("mobileactive");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}

document.getElementById("myMobilenav").ontouchmove = function(e) {
  e.preventDefault();
}

body {
  margin: 0;
}

@media (max-width:735px) {
  .nav {
    display: none;
  }
  .navcontainer {
    display: none;
  }
  header.Header.Header--top {
    display: none;
  }
}


/* END MAIN NAV STYLE */

.mobilehead {
  width: 120px !important;
  display: block;
  margin-left: 10px;
  padding-top: -10px;
}

#mobilehead {
  width: 100%;
  height: 80px;
  background-color: #e9e5fb;
  border-bottom: solid 1px #000;
  margin-bottom: 80px;
}


/* BEGIN MOBILE NAV STYLE */

.mobilenavcontainer {
  height: 100%;
  width: 0px;
  background-color: #e9e5fb;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 997;
}

.mobilenavcontainer > .mobilenav {
  position: relative;
}

#mobilemenuicon {
  width: 80px;
  height: auto;
  z-index: 5000;
}

.mobilenav .mobilemenuicon {
  top: 20px;
  right: 18px;
  position: fixed;
  z-index: 50000;
}

#mobilecloseicon {
  width: 80px;
}

.mobilenav .mobileclosebtn {
  top: 20px;
  right: 18px;
  margin-left: 10px;
  position: absolute;
}

.mobilenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  background-color: #e9e5fb;
  overflow: hidden;
  padding-top: 120px;
  font-family: "AmerigoBT";
}

.mobilemainitems a {
  text-decoration: none;
  font-size: 3em;
  color: #000;
  display: block;
  -webkit-text-stroke: .75px #000;
  -webkit-text-fill-color: #e9e5fb;
  line-height: 50px;
  width: 180px;
}

.mobilemainitems {
  padding-left: 30px;
  padding-top: 0px;
  margin-top: -96px;
}

.mobilesocialitems a {
  text-decoration: none;
  font-size: 1.5em;
  color: #000;
  display: inline-block;
  font-weight: 400;
}

.mobilesocialitems {
  padding-left: 30px;
  line-height: 35px;
  top: 480px;
  position: absolute;
}

.row1social {
  padding-left: 50px;
  display: block;
  width: 250px !important;
}


/* dropdown button */

.mobile-dropdown-btn {
  font-family: "AmerigoBT";
  text-decoration: none;
  font-size: 18px !important;
  color: #000;
  display: block;
  transition: 0.3s;
  line-height: 54px;
  border: none;
  background: none;
  width: 200px;
  text-align: left;
  outline: none;
  margin-left: -11px !important;
  padding-bottom: 5px;
}


/* active class for active dropdown button */

.mobileactive a {
  background-color: none;
  -webkit-text-stroke: .75px #000 !important;
  -webkit-text-fill-color: #e9e5fb !important;
}


/* dropdown container */

.mobile-dropdown-container {
  display: none;
  background-color: none;
  padding-left: 20px;
  font-family: "UniversEx";
  font-size: 11px;
  padding-bottom: 20px;
}

.mobile-dropdown-container a {
  line-height: 32px;
  -webkit-text-fill-color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

.mobile-dropdown-container a:hover {
  color: #000 !important;
  -webkit-text-stroke: transparent !important;
}

@media (min-width:736px) {
  .mobilenav {
    display: none;
  }
  .mobilenavcontainer {
    display: none;
  }
  #mobilehead {
    display: none !important;
  }
}

<header id="mobilehead"><img src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d5346b960f00012d395a/1560794420116/ck4%40300x.png" alt="Cathrine Khom" class="mobilehead" /></header>

<!-- BEGIN MOBILE NAV -->
<div id="myMobilenav" class="mobilenav">
  <a href="javascript:void(0)" class="mobileclosebtn" onclick="closeMobile()"><img id="mobilecloseicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07e8d86b960f00012f1522/1560799448192/closeup%40300x.png" /></a>
  <div class="mobilemainitems">
    <button class="mobile-dropdown-btn"><a href="#">Journal</a></button>
    <div class="mobile-dropdown-container">
      <a href="/journal">all</a>
      <a href="/journal?category=design">design</a>
      <a href="/journal?category=fashion">fashion</a>
      <a href="/journal?category=personal">personal</a>
      <a href="/journal?category=swoon">swoon</a>
      <a href="/journal?category=travel">travel</a>
    </div>
    <a href="/work">Work</a>
    <a href="/about">About</a>
    <a href="#">Contact</a>
  </div>
  <div class="mobilesocialitems">
    <div class="row1social">
      <a href="#" target="_blank">Twitter</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Instagram</a>
    </div>
    <div class="row2social">
      <a href="#" target="_blank">Pinterest</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Magazine</a>&nbsp;&nbsp;&nbsp;
      <a href="#" target="_blank">Spotify</a>
    </div>
  </div>
</div>

<div class="mobilenavcontainer">
  <span class="mobilenav" onclick="openMobile()"><img id="mobilemenuicon" class="mobilemenuicon" src="https://static1.squarespace.com/static/5c8e8d07a09a7e3c68de4c7b/t/5d07d2bda44aaa000188164d/1560793789313/menudown%40300x.png"/></span>
</div>
<!-- END MOBILE NAV -->