css转换chrome

Question

使用两个元素的转换在IE和Firefox中运行良好，但在Chrome中以某种方式“断断续续”。

我用一些GIF捕获了不同的行为：

• Firefox
• IE
• Chrome (notice how the right border "jumps" around")

Example on jsfiddle

是否可以在Chrome中修复此问题？我搜索时找不到任何东西。

提前感谢您的帮助：）

以下是一些示例代码 HTML：

<div class="outer">
    <div class="menu">
        asdf
    </div>
    <div class="content">
        <button id="trigger">toggle menu</button>
    </div>
</div>

CSS：

.outer > div {
    transition: transform 500ms ease, margin-right 500ms ease;
}

.menu {
    background-color: #1d1f20;
    top: 0;
    left: -200px;
    width: 200px;
    position: fixed;
    transform: translate(200px,0);
}

.content {
    transform: translate(200px, 0px);
    margin-right: 200px;
    background: green;
}

JS：

var current = '200px';

$('#trigger').on('click', function() {
    current = current === '200px' ? '0' : '200px';
    $('.menu').css({transform: 'translate('+current+', 0)'});
    $('.content').css({transform: 'translate('+current+', 0)', marginRight: current === '200px' ? '200px' : '0'});
});