Сохранение модальности jQuery в окне просмотра iPad

Question

Я написал довольно сложный jQuery-способ, поскольку я не хотел, чтобы что-то было тяжелым. Модальные функции отлично работают на всех браузерах, кроме iPad.

Если бы я был внизу страницы и нажмите, чтобы открыть лайтбокс, это откроется в начале страницы.

Я не использую jQuery для позиционирования окна, просто чистым css, кто-нибудь может понять, почему это будет работать во всех других браузерах, кроме iPad?

 
#lightbox { 
    position:fixed; /* keeps the lightbox window in the current viewport */ 
    top:0; 
    left:0; 
    width:100%; 
    height:100%; 
    z-index: 2; 
    background-color: rgba(0, 0, 0, 0.2); 
    font-weight: 100; 
    margin: 0 0 .1em 0; 
    color: #f8ef71; 
    text-shadow: 1px 1px 1px #af7913; 
    text-align: center; 
} 

Answer 1

положение: фиксированный универсально не поддерживается, я полагаю, ваша версия IOS меньше, чем версия 5, которая является первым релиз IOS, чтобы поддержать его? Этот модальный не будет также и на IE6 & 7. И он не будет работать в Android 2.3 и менее без отключить масштабирование с помощью метатега viewport.

Еще одна трудность, с которой вы столкнулись с положением: исправлено, что это относительно окна, а не окна просмотра, поэтому, когда масштабирование элемента не появится, как вы хотите. Вот почему они отключили исправление в android 2.3 без отключения масштабирования (или, как я полагаю), хотя они изменили позицию на этом в последующих версиях Android.

Вот связанный с этим вопрос: CSS "position: fixed;" on iPad/iPhone?

Answer 2

Благодаря Ed Кирка предупреждая меня к неподвижному проблеме позиции в IOS предварительной версии 5

я написал немного JS, чтобы решить мою проблему

 
if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') 
     { 
      var cssObj = { 
       'background-color' : 'rgba(0, 0, 0, 0)', 
       'position' : 'absolute', 
       'top' : $(document).scrollTop() 
      }; 

      $('#lightbox').css(cssObj); 
      $(window).scroll(function() {$('#lightbox').animate({top: $(document).scrollTop()}, 300);}); 
     };