Firefox中的CSS转换错误

Question

我正面临一个奇怪的Firefox错误。我有一个侧面菜单，有静态位置。

当我处于智能手机格式时，此菜单在选择菜单项后消失。菜单向左滑动并消失。然后我有一个后退按钮来做出反向动作。

它适用于Chrome，但在Firefox中，当我点击后退按钮时，菜单向右滑动，页面的某些元素在菜单上方保持可见，直到CSS translateX完成。然后，这些元素正确隐藏在菜单后面。

正确设置了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。我保持过渡，但把它放在左边的属性上。它工作得很好。但我不明白为什么翻译会在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%)' }
}