Question

我正在使用Firefox遇到一个奇怪的错误。我有一个静态位置的侧边菜单。

当我使用智能手机格式时，选择菜单项后此菜单消失。菜单向左滑动并消失。然后，我有一个后退按钮可以执行相反的操作。

它在Chrome上很好用，但是在Firefox中，当我单击“后退”按钮时，菜单向右滑动，并且页面的某些元素在菜单上方仍然可见，直到CSS translationX完成。然后，将这些元素正确隐藏在菜单后面。

正确设置了z-index属性。该错误仅在翻译时出现。

请参见下面的屏幕截图（“返回”按钮，图标和价格不应在菜单上方）：

https://i.stack.imgur.com/Y2X8M.png

页面结构如下：

<div>
    <aside id="menu">
        <ul>
            <li>Menu 1</li>
            <li>Menu 2</li>
            <li>Menu 3</li>
        </ul>
    </aside>
    <div id="page">
    Lorem ispum dolor sit amet
    </div>
</div>

侧边菜单的样式（React JSS）：

aside: {
  position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  zIndex: 10,
  backgroundColor: 'white',
  width: '100%',
  transition: 'transform .7s',
  '&.hidden': { transform: 'translateX(-105%)' }
}

有什么想法吗？

更新：我尝试使用left属性更改translateX。我保留了过渡，但将其放在left属性上。效果很好。但是我不明白为什么翻译会在Firefox中导致此错误

Answer 1

使用此-

aside: {
 position: 'absolute',
  top: 0,
  right: 0,
  bottom: 0,
  left: 0,
  zIndex: 10,
  backgroundColor: 'white',
  width: '100%',
  '-webkit-transition': '-webkit-transform 0.7s',
  '-moz-transition': '-moz-transform 0.7s',
   transition: 'transform 0.7s',
  '&.hidden': { '-webkit-transform': 'translateX(-105%)',
                '-moz-transform': 'translateX(-105%)',
                transform: 'translateX(-105%)' }
}

Firefox中的CSS翻译错误

1 个答案: