0

Using transform on two elements works fine in IE and Firefox but somehow "stutters" in Chrome.

I've captured the different behaviours with some gifs:

Example on jsfiddle

Is it possible to fix this behaviour in Chrome? I couldn't find anything when I searched.

Thanks for your help in advance :)

Here is some exemplary code.
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'});
});
machete
  • 1,127
  • 2
  • 13
  • 26
  • The IE gif is a little bit off, but it looked very smooth. – machete Aug 10 '15 at 11:14
  • 1
    Try to use -webkit-transform for Chrome and Opera and -ms-transform for IE – AleshaOleg Aug 10 '15 at 11:20
  • makes no difference: https://jsfiddle.net/jhehzu8m/ – machete Aug 10 '15 at 13:02
  • Looks like it runs much smoother in Chrome, when you don’t use `translate`, and achieve the effect via margin instead: https://jsfiddle.net/8tL2sfeb/2/ – CBroe Aug 10 '15 at 13:03
  • but it will run less smooth if more content (pictures, maybe youtube videos, ...) is in it, won't it? edit: oh never mind, we have a margin-right in it anyways.. – machete Aug 10 '15 at 13:04
  • Hey @machete did you solved? I suppose that I am experiencing the same issue, [here](https://stackoverflow.com/questions/51898825/push-side-menu-is-jiggling-at-open-close-in-chrome); Any thoughts? thanks, – typo_ Aug 18 '18 at 07:45

0 Answers0