移动端导航栏Transform: translateX属性在iPhone设备上失效的技术求助

云原生阿岚

2026-4-29

iPhone上移动端导航栏滑入动画失效（transform: translateX在iOS Safari/Chrome无效果）

问题描述

我最近开发了一个移动端导航栏，设计逻辑是从屏幕左侧外滑入至全屏显示——通过切换transform: translateX属性值从-100%到0%来实现这个过渡动画。这个效果在绝大多数测试设备、Chrome浏览器缩至最小宽度状态，以及开发者工具模拟移动端时都能正常工作，但在我的iPhone设备上完全失效：点击汉堡按钮后，导航栏没有任何滑入的动作，似乎根本没触发样式变化。

已尝试的解决方案

清理了Safari浏览器的历史记录与缓存，重启浏览器后测试，问题依旧
在iPhone上改用Chrome浏览器测试，导航栏滑入效果仍然不生效

代码实现

CSS代码

.nav-list { 
    position: absolute; 
    top: 0; 
    height: 100vh; 
    width: 100%; 
    display: flex; 
    flex-direction: column; 
    background-color: darkmagenta; 
    transform: translateX(-100%); 
    -webkit-transform: translateX(-100%); 
    -ms-transform: translateX(-100%); 
    -moz-transform: translateX(-100%); 
    -o-transform: translateX(-100%); 
    transition: transform 0.5s ease-in; 
} 
.nav-active { 
    transform: translateX(0%); 
    -webkit-transform: translateX(0%); 
    -ms-transform: translateX(0%); 
}

JavaScript代码

const navSlide = () => { 
    const burger = document.querySelector(".burger"); 
    const nav = document.querySelector(".nav-list"); 
    // Toggle Nav
    burger.addEventListener("click", () => { 
        nav.classList.toggle("nav-active"); 
    }); 
}; 
navSlide();