Скроллинг transform translateY и кроссбраузерная плавность

Задача у меня была следующая: есть несколько слайдов с вертикальным перелистыванием при помощи нативного скроллинга браузера. Текущий активный слайд должен перекрывать следующий за ним, который в свою очередь должен быть закреплен к верхнему краю страницы (как position fixed, но только с помощью transform translate).

В Chrome, Opera и Yandex браузере все работает как надо, а вот в Edge, IE11, Firefox, мобильном и десктопном Safari, мобильном Chrome, нижний слайд дергается.

Буду благодарен за совет как это пофиксить.

PS. Пробовал translate3d, с ним дергается во всех браузерах, -moz и -webkit тоже не помогли.

Пример: https://jsfiddle.net/90h5dptq/

css:

body {
    margin: 0
}
.content{
    background: #fff;
    min-height: 100vh;
    padding: 15px;
    visibility: hidden
}
.content.shown {
    visibility: visible;
    position: absolute;
    z-index: 11
}
.content.shown + .content {
    visibility: visible;
    z-index: 9
}
.shadow {
    z-index: 10;
    position: fixed;
    top:0;
    width:100%;
    height:100%;
    background: #000;
    opacity: 0.3
}

html:

<div class="content shown">
    <h1>Слайд 1</h1>
    <p>Текст</p>
</div>
<div class="content" id="next">
    <h1>Слайд 2</h1>
    <p>Текст</p>
</div>
<div class="shadow"></div>

js:

// Устанавливаем размер
document.body.style.height = '0px';
var body = document.body,
    html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight,
    html.scrollHeight, html.offsetHeight );
document.body.style.height = (height+window.innerHeight) + "px";
// Делаем смещение
window.onscroll = function(event) {
    var scrolled = document.body.getBoundingClientRect().top * -1;
    next.style.transform = 'translateY(' + scrolled + 'px)';
};