Какой самый правильный способ сделать фиксированный оверлей в safari ios?

Question

[sanex3339]

Итак, мне надо при скролле страницы в ios отобразить fixed оверлей размерами с окно (100% width/ 100% height от значений window). Казалось бы, плевое дело, но этот оверлей та ещё морока.
Делаю я его через position absolute. Что бы оверлей рисовался четко по тому месту, где в данный момент находится viewport, top и left вычисляю на js.
Но беда в том, что при быстром скролле страницы оверлей в итоге рисуется не под текущим расположением viewport'а, а со сдвигом.
Выяснял я причину и нашел её - у сколла в safari есть инерция, и оверлей рисуется в момент окончания скролла, а он после, страница ещё по инерции немного двигается.
Ну ок, добавим setInterval, миллисекунд на 300, что бы оверлей рисовался уже после окончания инерции скролла. Так нет же, все равно он иногда рисуется не там, где нужно.

Собственно, есть ли где туториал, гайд, совет или готовый пример, как 100% красиво и правильно сделать для этого сафари в этой ios фиксированный оверлей под 100% размеры окна, что б он никуда не съезжал, ну вообще никуда, даже на 1 пиксель не съезжал.

PS: под андроидом все работает отлично

Answer 1

[Pretor DH]

Блоки Fixed видимо идут в потоке - что и тянет за собой выше описанные проблемы.
Попробуй так JSfiddle, должно помочь.

html,body {
    position:absolute;
    top:0;bottom:0;
    left:0;right:0;
    overflow:hidden;
}
body {
    overflow:auto;
}
.modal {
    position:fixed;
    top:0;bottom:0;
    left:0;right:0;
}

ДОБАВЛЕНО:
Если создаешь модальное окно динамично, в модальной форме на любой елемент input добавь autofocus:
<input id="yourtextbox" ... autofocus />
Если критично в .js запомни позицию скрола в нужных элементах, при автофокусировке скролы могут уехать куда вздумается. А если модальное есть в документе но спрятано, то в функции показа модального можно добавить:

function setFocusToTextBox(){
    var textbox = document.getElementById("yourtextbox");
    textbox.focus();
    textbox.scrollIntoView();
}

А после закрития модального окна восстанови эти позиции.

Comments

[sanex3339]

Я вот сделал так: у html и body в момент показа оверлея с окном фигачу overflow: hidden, в результате overlay рисуется четко под window. Но появилась от этого проблема в IOS Safari - нам нужно рисовать оверлей например, если страница проскроллена более 400 пикселей по высоте. Если обновить страницу, при этом она проскроллена, пикселей на 500 (значение не важно, главное, что бы скролл был) вниз, то после обновления, оверлей рисуется визуально нормально, но реальное расположение оверлея находится выше, чем он отображается, т.е. если у овереля в модальном окне есть кнопки, сколько бы ты не кликал по ней - ничего не произойдет, а вот если кликнешь выше, в пустое место - то клик обработается.

Если после отрисовки оверлея отресайзить страницу или скролльнуть её, то реальное положение оверлея станет аналогичным его видимому положению и все станет нормально.

Соответственно, я пока костыль сделал, при отрисовки оверлея скроллю страницу на 1 пиксель вверх или вниз от текущей позиции window. Интересно и то, что если скролльнуть на 1 пиксель в одну сторону и тут же на 1 пиксель обратно, то реальная позиция оверлея не изменится. Вот такие дела.

[Pretor DH]

Не трогай HTML пусть будет всегда overflow: hidden.
У тебя скролл будет у body - а .modal будет лежать на уровне HTML. И ничего никуда не должно соскакивать. Попробуй на примере, что в моём посте: jsfiddle.net/pretordh/dsje8edn/.
Модальное окно работает по ховеру на высокий блок "М" справа...

Модальное окно Должно работать на чистом CSS. Не прикручивай костыли от JS.

[sanex3339]

к сожалению, не могу не трогать overflow hidden, тк оверлей и окно подрубаются к любой странице, соответственно, надо переопределить body и html css свойства тех страниц на наши, а как оверлей закрыли - вернуть их обратно в те значения. которые были

[Pretor DH]

sanex3339: Посмотри пару мыслей в ответе написал... То, что на вскидку пришло... Если не поможет. Тогда в привате скинь, что к чему прикручивать. Покручу - напишу ответ.

[sanex3339]

спасибо, за помощь, но в окне только кнопки (ссылка и див с событиями onclick). я наверное пока остановлюсь на своем велосипеде со скроллом на 1 px т.к. он работает.

тут кстати на ios safari вылез еще один странный баг, баг браузера судя по всему: если на ВСЕ элементы забинтить эвенту scroll prevenDefault(), то все казалось бы ок, скролл отрубается везде.
Но в сафари на ИОС есть место в самом низу окна, где вылезает навигейшн бар, так вот, когда этот навигейшн бар скрыт, то касаясь в то место, где он должен находиться (50-60 пикселей внизу окна), можно скроллить страницу как ни в чем не бывало. А у всех элементов скролл заблочен. genius.jpg

[Pretor DH]

sanex3339: Можно поставить просто пустой

Answer 2

[Александр Талалаев]

А почему нельзя position:fixed ?

Comments

[sanex3339]

сначала был fixed, если страница по ширине была со скролл баром и сдвинута вбок, то оверлей рисовался не под окном а левее. Если добавлял через js window.pageXoffset - рисовался правее окна оО.

Причем забавно было, вывожу css left оверлея - 0px, вывожу window.pageXoffset - 200px, к примеру. Задаю оверлею css left равным window.pageXoffset, вывожу опять его css left - 200px, смотрю на экран - оверлей сдвинут относительно окна пикслей на 90 вправо, точно не считал.