css - CSS 过渡和固定位置在 Safari 中不起作用
问题描述
//Menu Functionality
var menuButton = document.getElementById("menu-button");
menuButton.addEventListener("click",openNav);
var mainNav = document.getElementById("main-nav");
var btns = mainNav.getElementsByClassName("nav-link");
for (var i=0; i < btns.length; i++)
{
btns[i].addEventListener("click", function() {
openNav();
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
}
);
}
function openNav() {
var mainNav = document.getElementById("main-nav");
var menuButton = document.getElementById("menu-button");
mainNav.classList.toggle("open-nav");
if(menuButton.style.transform == ""){
menuButton.style.webkitTransform = "rotateY(180deg)";
}else {
menuButton.style.webkitTransform = "";
}
}
body {
font-family: "BrownPro",sans-serif;
font-size: 1.5em;
}
h2 {
font-weight: bold;
}
a {
color: #5a65ba;
}
.jumbotron-fluid
{
background-color: #292055;
}
#jumbotron-video {
width: 100%;
}
video {
max-width: 100%;
}
#main-nav {
position: fixed;
height: 100%;
font-size: 2rem;
font-weight: bold;
text-align: center;
z-index: 1;
top: 0;
width: 60%;
overflow-x: hidden;
transition:left 0.5s;
padding-top: 60px;
background-image: linear-gradient(100deg, #292055 calc(80% - 10%), transparent 0px);
}
nav a {
margin: 20px;
}
nav a:hover {
color: white;
}
.close-nav {
left: -60%;
}
.open-nav {
left: 0%;
}
#menu-button {
position: fixed;
margin-left: 2%;
max-width: 8%;
font-size: 2em;
top: 6%;
z-index: 2;
color: #ec008c;
cursor: pointer;
opacity: 75%;
transition: transform .5s;
}
.active {
color: white;
/*background-color: #5a65ba;*/
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<div class="jumbotron-fluid">
<img id="menu-button" src="http://www.posible.strangelandcreative.com/img/menu%20button.png" alt="menu-button"/>
<video id="jumbotron-video" muted loop>
<source src="https://player.vimeo.com/external/437237782.hd.mp4?s=19c3a456176f98a3e348659b2b90b230391dd3e2&profile_id=175" type="video/mp4">
</video>
<nav id="main-nav" class="close-nav justify-content-center navigation">
<a class="nav-link active text-align-center" href="#mision_id">MISIÓN</a>
<a class="nav-link" href="#eventos_id">EVENTOS</a>
<a class="nav-link" href="#aprende_id">APRENDE</a>
<a class="nav-link " href="#recursos_id">RECURSOS</a>
<a class="nav-link" href="#galeria_id">GALERÍA</a>
<a class="nav-link" href="#contact_id">CONTÁCTANOS</a>
</nav>
</div>
所以像往常一样,这只是一个 Safari 问题。我已经尝试了几件事来使这个菜单动画工作无济于事。菜单按钮似乎不尊重 z 索引,动画也出现故障。我在这里尝试了几个建议,但没有任何效果。在类上使用 -webkit- 前缀并没有做任何事情。摆脱过渡并没有做任何事情。
我在菜单容器上试过这个
-webkit-transform: translate3d(0px, 0px, 0px);
我试过按钮
transform: translateZ(1000px);
transform-style: preserve-3d;
没有什么能解决这个错误。在 chrome 和 firefox 上完美运行。
解决方案
推荐阅读
- python - 根据匹配的键:值对在嵌套字典列表中组合嵌套字典
- geometry - 通过 Basler Camera 和 Simulink 进行圆检测
- python - 如何在第二级具有可变长度的MultiIndex DataFrame中获取第二级的所有最后一行
- android - 如何在 RecyclerAdapter ViewHolder 上实现 LifecycleOwner?
- javascript - 如何避免在 Places 评论网站上重复相同的地方?
- android - 在没有蹦床的情况下跟踪通知点击(在 Android 12 中被禁止)
- angular - Angular Ionic - 数据未显示,因为 ctx.data 未定义
- firebase - Firebase v9 Next.js 导出 getFirestore 导致错误“无法读取未定义的属性 'getProvider'”
- django - 我想用鹡鸰反映图像
- reactjs - 页面加载后插入 React 组件