Стили кнопок исчезают, когда появляется меню?

Question

[mr_firuzinho]

Стили кнопок исчезают, когда появляется меню. Меню такой же, как у тостера, т.е выдвигается слева.
До -

после -

nav#slide-menu {
width: 200px;
z-index: 1000;
position: fixed;
BACKGROUND: #4F5A6E;
HEIGHT: 100%;
top: 0;
}

Это когда скрывается и при нажатии появляется :

position: fixed;
background-color: #4F5A6E;
top: 0;
left: -300px;
bottom: 0;
display: block;
overflow-y: scroll;
float: left;
width: 100%;
max-width: 284px;
height: 100%;
-moz-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;

Comments

[Алексей Уколов]

Покажите код

[mr_firuzinho]

Алексей Уколов: это когда он не скрывается :
nav#slide-menu {
width: 200px;
z-index: 1000;
position: fixed;
BACKGROUND: #4F5A6E;
HEIGHT: 100%;
top: 0;
}

Это когда скрывается и при нажатии появляется :
position: fixed;
background-color: #4F5A6E;
top: 0;
left: -300px;
bottom: 0;
display: block;
overflow-y: scroll;
float: left;
width: 100%;
max-width: 284px;
height: 100%;
-moz-transition: all 300ms;
-webkit-transition: all 300ms;
transition: all 300ms;

[Алексей Уколов]

mr_firuzinho: выложите свой код прямо в вопрос, чтобы людям не приходилось открывать комментарии, чтобы увидеть соизволил вопрошающий все-таки его показать или нет. Уважайте сообщество и сообщество будет уважать вас.

[Алексей Уколов]

И, разумеется, не забудьте обернуть код в соответствующие теги, чтобы он подсвечивался.

[mr_firuzinho]

Алексей Уколов: хорошо , спасибо за совет , и еще я обернул , но он не подсвечивается почему-то.

[Евгений Петров]

Алексей Уколов: Мне кажется, что лучше выкладывать куда-то типа jsfiddle.net
А то приходится или самому делать то же, или у себя сохранять. Неудобно же:)

[Алексей Уколов]

Евгений Петров: наращиваем сложность потихоньку :)

[Максим Дунаевский]

Хочу посмотреть, что автор имеет ввиду под словами "стили кнопок исчезают".

[mr_firuzinho]

Максим Дунаевский: Посмотрите пожалуйста , я загрузил изображения.

[Максим Дунаевский]

mr_firuzinho: по нажатию на кнопку меню не производится ли подгрузка дополнительных CSS? Не делается ли выборка в jQuery с очисткой/подменой стилей?

[mr_firuzinho]

Максим Дунаевский: вот js

(function () {
    var $body = document.body, $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];
    if (typeof $menu_trigger !== 'undefined') {
        $menu_trigger.addEventListener('click', function () {
            $body.className = $body.className == 'menu-active' ? '' : 'menu-active';
        });
    }
}.call(this));

Answer 1

[maolo]

Во всех браузерах такое поведение?
Недавно столкнулся с подобным багом, причем исключительно на webkit-браузерах - при прокрутке исчезал блок. как ни странно помог translate3d.
Попробуйте кнопке задать:

.btn {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

Comments

[mr_firuzinho]

Спасибо большое, я уже понял почему так происходит.