2

I have this app that has a bar at the top of the page that has a bunch of clickable elements it has always been a problem since on Safari IOS when clicking high up it brings down the address bar and exits fullscreen. We solved this initially by adding some padding up top to make the clickable area larger but they seem to have increased this size on IOS 13 and adding more padding will make it look horrible. Anyone had this problem and have a workaround for it? Some way the click area for bringing down the address bar smaller or something?

The big problem is that we need our app to stay in fullscreen so the most optimal would be to be able o decrease the clickable area for the address bar to come down or to be able to block it in landscape mode is there really no way to go around this? for instance going into twitch.com on safari and iPhone and put it in landscape you are not able to press the search icon.

2 Answers 2

2

I have the same issue, I don't think is possible to fix this as it seems to be a safari issue, if you check not event apple.com site works as expected.

The workaround I did is detecting when the app gets out of fullscreen by comparing the screen.height with the screen.availHeight and move the top bar just below the address bar and there users can click, not optimal, but works for us. :)

Hope it helps

-2

In your CSS code try to remove every value of "REM" "VW" "VH" use only pixels "PX". that should fix the issue 100%.

1
  • This would first off be a huge refactor and also destroy a lot of the responsive design we get using EM as we are now but nice to know there is a way Commented Oct 22, 2019 at 8:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.