Ios safari баг, position: fixed; для .header как решить?

Question

[furashcka]

Добрый день!
Сама проблема - https://www.youtube.com/watch?v=BuNEuYLFqlQ&featur...
Если проскролить до самого конца страницы и открыть меню, шапка "плывет" (
На stackoverflow нашел похожие вопросы, в основном это:

.wrapper {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
.header {
    -webkit-transform: translate3d(0, 0, 0); 
     transform: translate3d(0, 0, 0) 
}

Не помогает(
Сайт - burlesknails.ru
3-й день мучаюсь с этим, помогите пожалуйста кто знает.

Answer 1

[Vladimir T]

Что сразу кинулось в глаза. Это то что вы добавляете body-hidden
overflow: hidden;
Но в iOS есть баг(https://bugs.webkit.org/show_bug.cgi?id=153852) с overflow для body а именно не работает.
А в место этого уберете width у main-wrapper и добавите следующий стили:

position:relative;
overflow: hidden;

то получите следующие

Comments

[furashcka]

хм... спасибо большое!!!

Answer 2

[furashcka]

Ребят всем спасибо большое!!!! Прикрутил вот этот костыль - https://github.com/scottjehl/device-bugs/issues/23
Заработало!