iPhone 6タブと固定要素のある風景モードの奇妙なバグ

タブモードをオンにしてiPhone 6 + Safari（iOS 9はほとんどの場合、iOS 8にも小さな不具合があります）で狂った問題が発生します。すべての固定要素は縦向きと横向きに正しく配置されていますが、1つ以上のタブが開いた状態で横向きモードで表示および/または移動されません。表示されないものの、クリック可能で残りのコンテンツと重なり合っています。ローテーションデバイスは、問題をある程度解決し、タブ間の切り替えも行います。要素の位置を固定から静的に設定したり戻したりすることも役立ちます。iPhone 6タブと固定要素のある風景モードの奇妙なバグ

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

アプリケーションはかなり大きいですが、私はcodepenでこの問題を再現することに成功しました： iPhone 6 Plus position:fixed bug

オープンそのまま風景の中にタブ付き。

出典

2016-02-24 Alex.Me

アプリケーションにスタイルを追加すると、要素が機能します。このような何か：

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>

出典

2016-10-05 00:51:21

iPhone 6タブと固定要素のある風景モードの奇妙なバグ

答えて

関連する問題