CSS3 transform возвращает положение: фиксированное

При использовании css3 transform(), position: fixed не применяется. Я сделал полностью работающий jsFiddle, показывающий проблему: http://jsfiddle.net/SR5ka/

Сначала прокрутите вниз, обратите внимание, что левая боковая панель остается неподвижной. Теперь нажмите expand и прокрутите вниз, заметьте, что левая боковая панель теперь не исправлена.

Есть идеи, если есть родной css исправить для этого?

2 23
css css3 css-transforms

2 ответа:

Вы могли бы использовать обходной путь как этот. Он включает в себя переключение левого значения (через класс) как для фиксированного элемента, так и для контейнера.

.global-wrapper {
    position: relative;
    -webkit-transition: 300ms;
    transition: 300ms;
}
.global-wrapper.expanded,
.global-wrapper.expanded .navbar {
    left: 200px;
}
.navbar {
    -webkit-transition: 300ms;
    transition: 300ms;
    position: fixed;
    width: 100px;
    height: 100%;
    top: 0px;
    left: 0px;
}
.content {
    position: relative;
    width: calc(100% - 170px); /* 100% - width of left bar plus margin */
}

С небольшим количеством ванили JS, чтобы переключить его класс: 

var wrapper = document.querySelector(".global-wrapper");
document.getElementById("expand").onclick = function() {
        wrapper.classList.toggle("expanded");
}
4

Согласно этому ответу: https://stackoverflow.com/a/15251226/125264 Эта проблема может быть исправлена путем добавления dummy-webkit-transform к элементу, который должен быть исправлен. Работать на меня.

Edit 04.2016

Похоже, больше не работает.

3