iPhone 6 Plus dziwne błędy w trybie poziomym z zakładkami i naprawionymi elementami

Mam pewne zwariowane problemy z iPhone'em 6+ Safari (iOS 9 głównie, chociaż iOS 8 ma również kilka drobnych usterki) z włączonym trybem tabulacji. Wszystkie elementy stałe są ustawione prawidłowo w układzie pionowym i poziomym, ale nie są widoczne i/lub przesunięte w trybie poziomym przy otwartej jednej lub kilku zakładkach. Mimo że nie są widoczne, nadal można kliknąć i klikać pozostałe elementy. Obrotowe urządzenie rozwiązuje problem w pewnym stopniu, a także przełącza się między kartami. Ustawienie pozycji elementu od stałego do statycznego iz powrotem również pomaga.iPhone 6 Plus dziwne błędy w trybie poziomym z zakładkami i naprawionymi elementami

HTML:

<html> 
    <head></head> 
    <body> 
    <div id="application"> 
     <div class="outer-header"> 
     <div class="inner-header"> 
      <a id="link-test" href="#">Click me!</a> 
     </div> 
     </div> 
    </div> 
    </body> 
</html>

CSS:

body { 
    background: linen; 
} 

.outer-header { 
    position: fixed; 
    width: 100%; 
    height: 30px; 
    top: 0; 
    left: 0; 
    background: steelblue; 
} 

.inner-header { 
    background: white; 
}

Aplikacja jest dość duży, ale udało mi się odtworzyć ten problem na codepen: iPhone 6 Plus position:fixed bug

otwórz go bezpośrednio w krajobrazie z zakładkami.

Źródło

2016-02-24 Alex.Me

Po dodaniu stylu do elementu aplikacji będzie działać. Coś takiego:

document.querySelector('#link-test') 
 
    .addEventListener('click', 
 
    function(e) { 
 
     e.preventDefault(); 
 
     alert('You did it!'); 
 
    });

body { 
 
    background: linen; 
 
} 
 

 
#application { 
 
    position: relative; 
 
} 
 

 
.outer-header { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 30px; 
 
    top: 0; 
 
    left: 0; 
 
    background: steelblue; 
 
} 
 

 
.inner-header { 
 
    background: white; 
 
}

<html> 
 
    <head></head> 
 
    <body> 
 
    <div id="application"> 
 
     <div class="outer-header"> 
 
     <div class="inner-header"> 
 
      <a id="link-test" href="#">Click me!</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </body> 
 
</html>

Źródło

2016-10-05 00:51:21

iPhone 6 Plus dziwne błędy w trybie poziomym z zakładkami i naprawionymi elementami

Odpowiedz

Powiązane problemy