Geek Answers Handbook

IPhone 6 Plus strange errors in landscape mode with tabs and fixed elements

I have some crazy problems with the iPhone 6+ Safari (mostly iOS 9, although iOS 8 also has some minor glitches) with tabbed mode enabled. All fixed elements are located correctly in portrait and landscape, but are not displayed and / or moved in landscape mode with the opening of one or more tabs. Although not visible, they are still clickable and overlap the rest of the content. The rotating device solves the problem to some extent, and also switches between tabs. It is also useful to set the position of an element from fixed to static and vice versa.

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

The application is quite large, but I managed to reproduce this problem on codepen: Position of iPhone 6 Plus: bug fixed

Open it right in the tabbed landscape.

+7
css ios iphone mobile-safari css-position
source share
1 answer

If you add style to your app element, it will work. Something like that:

 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>
0
source share

More articles: