IPad Safari 100% высота вопрос

У меня есть модальный div на моей странице, который выделяет фон. Если я установил высоту оверлейного div на 100%, он отлично работает на IE (рабочий стол), но на iPad Safari полная высота не будет выделена серым цветом. В чем именно проблема? Это связано с фиксированной позицией/окном просмотра? Пожалуйста помоги. Ниже приведен CSS для того же самого;

#TB_overlay {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
}
.TB_overlayBG {
    background-color: #000000;
    opacity: 0.4;
}

Ответ 1

Привет, самый простой способ и то, как я это делаю, - дать максимальную ширину высоты для наложения. Как:

.overlay{
 position: fixed;
 display: none;
 top: 0;
 left: 0;
 z-index: 99;
 width: 10000px;
 height: 10000px;
 opacity: 0.5;
 background: #ccc;
}

Вы можете поместить это внизу, т.е. перед тегом body и изменить его display на block всякий раз, когда вы хотите вычеркнуть фон. Очевидно, что все, что вы хотите показать сверху, должно иметь большее значение z-index. Надеюсь это поможет. Дайте мне знать, если вы не понимаете.

Ответ 2

Необходимо установить высоту и ширину устройства, вы можете использовать специальные стили iPad для достижения этого, чтобы он не разбивал ваши другие браузеры.

Ссылка: http://css-tricks.com/snippets/css/ipad-specific-css/

Не видя этого, трудно сказать, в чем проблема, но попробуйте использовать вышеприведенный CSS, чтобы применить конкретный css для iPad Safari.

Ответ 3

Ваши проблемы:

Большинство мобильных браузеров игнорируют position:fixed
Размеры и размеры видовых экранов обрабатываются по-разному, поэтому трюк position:absolute;... также не работает - вам необходимо динамически размер div в script, указав размер окна просмотра или сделайте его достаточно большим, чтобы охватить все возможные размеры страниц