Css3 преобразует положение: фиксировано

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

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

Любая идея, если для этого есть встроенное исправление css?

Ответ 1

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

.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");
}

Ответ 2

В соответствии с этим ответом: fooobar.com/info/51483/... Эту проблему можно устранить, добавив фиктивный -webkit-преобразование в элемент, который необходимо устранить. Работал для меня.

Изменить 04.2016

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