CSS3 Transitions + jQuery:对于两个不同的项目，x轴的转换在不同的浏览器中有不同的结果

Question

Codepen:这里有一个Codepen给那些想直接进入的人。在Chrome和IE中尝试一下，看看结果的差异)

我尝试使用css3转换/过渡，因为，好吧，他们比jquery效果更流畅。

我有一个网站的移动版本，在顶部有一个固定的栏与它的标志和一个导航图标。当点击或触摸导航图标时，左侧会弹出一个侧边导航条。

这就是css3的由来。我仅使用jQuery制作了这个功能的工作版本，但是在手机上的动画非常不稳定。我下载了jQuery转场插件，它基本上把css3转场集成到jQuery中，就好像它们是动画一样(但这不是重点——我不认为问题出在这里)。

在css3版本中，当我用x: [some amount]移动我的内容主体和固定标题时，不同浏览器的转换显示不同。在除IE10以外的所有桌面浏览器中，固定页眉的长度都是应有长度的两倍，而内容主体则向右移动。在我的手机中，在chrome中，标题飞出了它应该的两倍，而在默认的Android浏览器中没有这样做。

更多信息:我用chrome检查器检查，标题和内容体都接受相同的转换([一些数字]px, 0)。标题嵌套在内容体内。我认为这就是问题所在。有些浏览器会随着内容移动报头，然后再次解释报头的转换。另一方面，由于位置是固定的，一些浏览器独立地解释这两个转换。

我的问题是:是什么技术上的原因导致了这种差异，怎样才能在所有现代浏览器中获得一致的结果?

Codepen:(就像我说的，在Chrome上它不像预期的那样工作，但如果你尝试IE，它可以)

Answer 1

这是因为导航条是#bod元素的子元素，当#bod移动时，导航条也随之移动。您还应用了另一个过渡到导航条，这是第二次重新定位它。不同浏览器的不同处理方式是由使用带有"fixed"属性值的过渡引起的。一个更简单和更适用的解决方案是在#bod上使用toggleClass()方法，用更少的代码实现你想要的。这是codepen。Css添加:

#bod {
    transition: margin .5s ease-in-out;
}
#bod.menu-open {
    margin-left: 30%;
}

和更简单的js:

$("#toggle").on("touchstart mousedown", function (event) {
    event.stopImmediatePropagation();
    event.preventDefault();
    $('#bod').toggleClass('menu-open');
});