iPhone 6 Plus bugs étranges en mode paysage avec des onglets et des éléments fixes

J'ai des problèmes de folie avec iPhone 6+ Safari (iOS 9 principalement, bien que iOS 8 a aussi quelques problèmes mineurs) avec le mode onglets. Tous les éléments fixes sont positionnés correctement en mode portrait et paysage, mais ne sont pas visibles et/ou décalés en mode paysage avec un ou plusieurs onglets ouverts. Même s'ils ne sont pas visibles, ils sont toujours cliquables et chevauchent le reste du contenu. Rotating device résout le problème dans une certaine mesure, ainsi que la commutation entre les onglets. Le réglage de la position de l'élément de fixe à statique et arrière aide également.iPhone 6 Plus bugs étranges en mode paysage avec des onglets et des éléments fixes

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; 
}

L'application est assez grand, mais je l'ai réussi à reproduire ce problème sur codepen: iPhone 6 Plus position:fixed bug

ouvrir directement dans le paysage avec onglets sur.

Source

2016-02-24 Alex.Me

Si vous ajoutez un style à votre élément d'application, cela fonctionnera. Quelque chose comme ceci:

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>

Source

2016-10-05 00:51:21

iPhone 6 Plus bugs étranges en mode paysage avec des onglets et des éléments fixes

Répondre

Questions connexes