使用 transform 和 flex 的菜单在移动和桌面上的不同行为

Question

我尝试在屏幕右侧隐藏一个菜单（带有变换），当鼠标悬停在图标上时它会返回到屏幕上。它在台式机（chromium 和 firefox）上运行良好，但在移动设备（chrome 和 firefox）上运行很奇怪。

这是它应该在移动设备上隐藏时的显示方式。

我在一个新项目中尝试了这段代码，仅此而已，它在移动设备和使用 firefox 开发工具的移动仿真上一直有奇怪的行为。无法使用代码段获取它。

live version running here。在移动设备上或使用开发工具和移动仿真打开它会让它变得很奇怪。您还可以看到桌面和移动设备之间的区别。

更新：如果我将菜单隐藏在左侧或顶部，它会保持隐藏状态，不会出现任何缩小或滚动问题。但是一旦我将它隐藏在右侧或底部，我就会在手机上遇到缩小/滚动问题。

body {
  overflow-x: hidden;
}

.menu {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 2rem 5rem;
  background: #424242;
  transform: translate(200%, 0);
  transition: transform .5s;
  z-index: -1;
}

.icon { 
  display: block;
  height: 3rem; 
  cursor: pointer;
  position: fixed;
  right: 1rem;
  top: 1rem;
  path { fill: #000; }
  z-index: 99;
}

.icon:hover ~ .menu {
  transform: translate(0, 0);
}

 <body>
    <div>
        <nav>
          <svg class='icon' viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M0 10H14V8H0V10ZM0 0V2H14V0H0ZM0 6H14V4H0V6Z" fill="black"/>
          </svg>

          <ul class="menu">
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
            <li>content</li>
          </ul>
        </nav>
      <main>Lorem ipsum dolor sit amet consectetur.</main>
    </div>
  </body>

非常感谢！马修

Answer 1

您的 netlify 示例太基础了，它甚至缺少 body、main 和 nav 的基本样式。此外，在该示例示例中，我们发现，在检查 svg 的 .icon class:

时

至于最初的问题，如果我按照你的 'pressing a button' 的说法，它在桌面上对我来说并不完美。只有悬停交互：

看来您没有充分描述您的问题，或者您的示例代码看起来不像您的真实代码。

Answer 2

好的。所以我设法通过将 position: fixed; 添加到我的菜单的父级来修复它。我不确定我是否修复了它，或者它是否是一种作弊代码，但它确实有效。

使用 transform 和 flex 的菜单在移动和桌面上的不同行为

Different behavior on mobile and desktop for menu using transform and flex

html

css

transform

flexbox