当我在chome和firefox中打开菜单时，它可以正常工作，但是当它在Safari中打开时，菜单打开了，但是菜单栏外的选项没有出现，我检查了几个小时的代码并进行了测试，但没有得到满意的结果。有人可以帮我解决这个问题吗？
When I open the menu the information are hidden
When I put my mouse on shows me the elements list exist
您可以在Codepen上访问我的代码：https://codepen.io/Kadijna/full/GRKbWqg
因为我使用的是sass，所以不能放在下面的编译器中：
var isActive = false;
$('.menu-touch').on('click', function () {
console.log('cliquei');
if (isActive) {
$(this).removeClass('active');
$('.drop-menu').removeClass('menu-open');
} else {
$(this).addClass('active');
$('.drop-menu').addClass('menu-open');
}
isActive = !isActive;
});
$('.drop-menu .menu-content ul li.btn-clique').on('click', function () {
if (isActive) {
$('.menu-touch').removeClass('active');
$('.drop-menu').removeClass('menu-open');
} else {
$('.menu-touch').addClass('active');
$('.drop-menu').addClass('menu-open');
}
isActive = !isActive;
});
$('.drop-menu .menu-content ul li .submenu li').on('click', function () {
$('.menu-touch').removeClass('active');
$('.drop-menu').removeClass('menu-open');
});$bg-gray: #fcfcfc;
$bg-orange: #FCEED6;
$bg-blue: #FAFCFD;
$gray: #4a4a4a;
$gray-primary: rgba(0, 0, 0, 0.8);
$gray-secondary: rgba(0,0,0,.6);
$lightgray: #B0AFB0;
$blue: #3478c7;
$royal: #022757;
$orange: #FCC351;
$blue2: #74AAE9;
.multi-collapse{
text-align: center;
}
.menu-collapse{
list-style: none;
padding: 0;
margin: 0;
display: inline-flex;
padding: 15px 0;
li{
color: $gray;
padding-left: 30px;
font-size: 2.1rem;
font-family: ApercuMedium;
a{
color: $gray-primary;
display: inline-block;
&:after{
display:block;
content: '';
border-bottom: solid 3px $blue;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
&:hover{
color: $blue;
text-decoration: none;
}
}
a:hover:after, a:hover.line-menu {
transform-origin: 0% 100%;
}
a:hover:after, a:hover:before { transform: scaleX(1); }
}
}
.drop-menu{
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
.menu-content {
right: 0;
top: 0;
width: 100vw;
min-height: 100vh;
background: #fcf2e0;
position: fixed;
transform: translateX(100vw);
transition: transform 0.6s cubic-bezier(.56,.1,.34,.91);
padding: 0;
z-index: 8;
overflow: auto;
.container{
height: -webkit-fill-available;
}
.grid-menu{
height: inherit;
display: flex;
align-items: center;
justify-content: center;
.img-menu{
background-image: url(/images/computer.png);
height: 75vh;
background-repeat: no-repeat;
}
.navbar-side {
margin: 0;
list-style: none;
padding: 0;
padding-top: 40px;
padding-left: 10px;
li {
font-size: 3.2rem;
font-family: ApercuMedium;
color: $gray-primary;
position: relative;
a{
color: $gray-primary;
display: inline-block;
&:after{
display:block;
content: '';
border-bottom: solid 3px $blue;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
&:hover{
color: $blue;
text-decoration: none;
}
i{
font-size: 25px;
}
}
.item-menu:hover:after, .item-menu:hover.line-menu {
transform-origin: 0% 100%;
}
a:hover:after, a:hover:before { transform: scaleX(1); }
.line-menu{
display: none;
}
.submenu{
overflow: hidden;
max-height: 0;
-webkit-transition: all 0.5s ease-out;
list-style: none;
padding: 0;
margin: 0;
li{
font-family: ApercuRegular;
a{
font-size: 2.8rem;
color: $gray-primary;
&:hover{
color: $blue;
}
}
}
}
&:hover {
.submenu{
display: block;
max-height: 200px;
}
}
}
}
.lang{
margin-top: 20px;
padding-left: 10px;
a{
color: $gray-primary;
font-family: RobotoRegular;
font-size: 2.2rem;
}
a:last-child{
color: $blue;
}
span{
color: $gray-primary;
font-size: 3rem;
font-size: 2.2rem;
padding: 0 10px;
}
}
.info-contact{
display: none;
div:first-child{
a{
display: block;
color: $blue;
font-family: NotoBold;
font-size: 2.2rem;
}
}
p{
color: $blue;
font-family: NotoBold;
font-size: 2.2rem;
}
.marker{
font-family: "NotoRegular";
font-size: 1.9rem;
color: #236abe;
}
}
}
.social-menu{
margin: 0;
list-style: none;
padding: 0;
.face, .in{
display: inline-block;
height: 60px;
width: 60px;
a{
font-size: 2.6rem;
color: $blue;
}
}
}
}
}
.menu-open {
.menu-content {
transform: translateX(0);
}
}
header{
position: fixed;
top: 0;
z-index: 9;
background: #fff;
width: 100vw;
overflow: hidden;
}
.navbar{
.menu-touch,
.menu-touch span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
.menu-touch {
position: relative;
width: 40px;
height: 24px;
text-align: right;
cursor: pointer;
span {
position: absolute;
left: 0;
width: 100%;
height: 4px;
background-color: $gray-primary;
border-radius: 4px;
}
span:nth-of-type(1) {
top: 0;
}
span:nth-of-type(2) {
top: 10px;
}
span:nth-of-type(3) {
bottom: 0;
}
}
.menu-touch:not(.active):hover span:nth-of-type(2) {
width: 70%;
}
.menu-touch:not(.active):hover span:nth-of-type(3) {
width: 35%;
}
.menu-touch.active span:nth-of-type(1) {
-webkit-transform: translateY(10px) rotate(-45deg);
transform: translateY(10px) rotate(-45deg);
}
.menu-touch.active span:nth-of-type(2) {
opacity: 0;
}
.menu-touch.active span:nth-of-type(3) {
-webkit-transform: translateY(-10px) rotate(45deg);
transform: translateY(-10px) rotate(45deg);
}
.logo{
margin: 0;
z-index: 8;
a{
img{
height: 35px;
}
}
}
.bnt-navbar{
z-index: 10;
justify-content: flex-end;
align-items: center;
}
.change-lang{
display: none;
margin-right: 4rem;
a:first-child{
margin-right: 1rem;
}
a{
font-size: 1.8rem;
color: $lightgray;
&:hover{
color: $gray;
text-decoration: none;
animation: shake .9s cubic-bezier(.36,.07,.19,.97) infinite;
backface-visibility: hidden;
transform-origin: top right;
}
}
a.active{
color: $blue;
}
}
}
.loader-pag {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background-color: #fff;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
.blc-loading{
position: absolute;
left: calc(50% - 136px);
top: calc(50% - 72px);
}
}
.site-content{
overflow-x: hidden;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div class="container">
<div class="navbar navbar-light justify-content-between">
<div class="logo navbar-brand d-flex w-50">
<a href="#home">logo</a>
</div>
<div class="bnt-navbar d-flex w-50">
<a class="menu-touch menu" name="button menu" aria-label="button menu" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">
<span></span>
<span></span>
<span></span>
</a>
</div>
<div class="drop-menu">
<nav class="menu-content">
<div class="container">
<div class="row grid-menu">
<div class="col-xs-12 col-md-12 col-lg-9">
<ul class="navbar-side" id="navbarSide">
<li class="btn-clique"><a class="item-menu" href="#services">Services</a></li>
<li class="btn-clique"><a class="item-menu" href="#process">Process</a></li>
<li class="btn-clique"><a class="item-menu" href="#cases">Cases</a></li>
<li>
<a class="item-menu" href="#aboutus">Our team <i class="fas fa-caret-down"></i></a>
<ul class="submenu">
<li><a href="#joinus">Join Us</a></li>
<li><a href="#stacks">Stacks</a></li>
</ul>
</li>
<li class="btn-clique"><a class="item-menu" href="#blog">Blog</a></li>
<li class="bnt-pj btn-clique"><a class="item-menu" href="#startproject">Start a project</a></li>
<li class="btn-clique"><a class="item-menu" href="#contact">Contact</a></li>
</ul>
<div class="lang">
<a href="/pt/">PT</a>
<span> | </span>
<a href="/">EN</a>
</div>
</div>
</div>
</div>
</nav>
</div>
</div>
</div>
</header>