I'm working on a site optimized for iOS7. i found out that, On orientation change to landscape on safari mobile the site goes to full screen but the browser blocks some pixels of height and width top and bottom of the view. Any touch or tap events in the area will not do what we expect it to do but it just es out of the full screen view and triggers browser options.

1.This is a screenshot of fullscreen view and when i click on "what is twitter?" and fullscreen turn off and options view is shown(second image)

2.This is the second image where we can see upon clicking "what is twitter" we get this view

Is there any possible way we could over ride that tap?

I'm working on a site optimized for iOS7. i found out that, On orientation change to landscape on safari mobile the site goes to full screen but the browser blocks some pixels of height and width top and bottom of the view. Any touch or tap events in the area will not do what we expect it to do but it just es out of the full screen view and triggers browser options.

1.This is a screenshot of fullscreen view and when i click on "what is twitter?" and fullscreen turn off and options view is shown(second image)

2.This is the second image where we can see upon clicking "what is twitter" we get this view

Is there any possible way we could over ride that tap?

• javascript
• html
• ios
• css
• ios7

• if you are using CSS for your project just try to add 'webkit' css for your header as margin-bottom....that should do the trick "-webkit-margin-top-collapse: collapse;" – malcolmX Commented Nov 7, 2013 at 7:48
• 3 Did you manage to solve this? I am having the same problem but with links in the top right not firing their click event because the tap is within a "deadzone"... e.g. where your "Sign up" link is – jjenzz Commented Feb 20, 2014 at 14:22
• Possible duplicate of Buttons aligned to bottom of page conflict with mobile Safari's menu bar – Emile Bergeron Commented Aug 13, 2019 at 19:07

2 Answers 2

I think I may have found an answer, but can't confirm when switching between Portrait and Landscape. Setting your content to have the following styles:

• height: 100% (allows content to fill the viewport and go beyond the bottom)
• overflow-y: scroll (allows you to scroll below the viewport; the default value is visible)
• -webkit-overflow-scrolling: touch (to smooth any scroll behavior)

appears to force the iOS menu in Safari to always appear. That way, button clicks will actually work instead of opening up the Safari menu. Hope this helps!

If I understand your question right, your link is on the bottom of your page. You have to add some space to the bottom of the page (the height of the safari icon bar). Though this helps only if the user scrolls all the way down to the bottom.

The non-clickable Area is relative to the browser viewport, not to the page height. So when a button (or something else) is inside that area where the toolbar appears, you can't click it on first try.