Из-за чего может ломаться верстка на iphone?

Question

[Сергей Кошкин]

Кто подскажет из-за чего на айфоне может ехать верстка? В эмуляторе в хроме все ок, на нескольких андроид телефонах (разных размеров) тоже все ок, а на гребанных айфонах(5-6 другие не тестил) секции не влазят, скролл через секцию, и вообще грусть и боль.
Вот сайт printstudio.ks.ua
Cкролл по секциям сделан через https://github.com/peachananr/onepage-scroll
Фреймворк Bootstrap 3x

В media queries размеры задавал через vh\vw

Comments

[Марик Цукор]

из-за айфонов

Answer 1

[Алексей]

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

.onepage-wrapper .section {
    width: 100%;
    height: 100%;
}
top: 0%, 100%, 200%

Comments

[Сергей Кошкин]

в сафари каком именно и на чем именно? "top" нужен для работы onepage scroll. На андроиде же все ок, и на пк и на макбук

[Алексей]

Сергей Кошкин: у меня все на винде, версию сафари не скажу сейчас. В документации к OnePage Scroll
$(".main").onepage_scroll({
sectionContainer: "section",
direction: "vertical"
});
Говорит о том что идет навигация по секциям внутри родительского класса .main. Так что позиционирование через top в % не имеет смысла, это видно из демо.

[Сергей Кошкин]

Алексей: Говорю же это скрип так работает, он от секции к секции меняет top:0(1 section), top:100%(2 section) и т.д. с этим все ок. На андроиде все ок, на винде, на макбуке, а на айофоне нет.
Будто страница сперва рендерится от края до края дисплея, а потом сдвигает содержимое под адресную строку и нижнюю плашку с закладками.