Check the screenshot attached. That area is being used for different scenarios like: modals, navbars, etc.
If you plan to add it, you need to improve your positions, for example this modal have these css properties:
bottom: 0; position: fixed
So if you are showing the address bar, you need to improve your position: 0 ABOVE the address bar, not behind it.
It actually does make a ton of sense, but clearly needs some significant adjustment during beta. As the iPhone and its screen have been getting wider and taller, one-hand usage that used to be almost inherent has turned into - at times - a sort balancing/hand-stretching procedure. Moving web navigation and control within easy thumb reach makes sense. However, there’s definitely some current issues. Since every website ever in history has been designed with a layout where the address bar is up top, this new feature interferes with some sites - likely more than I know. For me, I day-trade cryptocurrency options, and the platform I use has a gorgeously simple mobile interface when you go to the site. However. My “Buy” and “Sell” buttons are guess where? Bottom of the screen. If I want to get specific with my $ amount on a trade - say $103.55 - I can tap the digit field and a calculator-like keypad pops up…. At the BOTTOM. The new toolbar/address bar covers up all those functions. I can try to and get it minimizes, bud still, the second I touch the screen it pops right back up in my way. I can go to the settings (3 dots) feature and select “Hide Toolbar”, but same problem…. The minute I touch the screen, there it is. Right in my way again. I’ve used Safari 98% of the time on the internet for over a decade. Now to do my trading I’ve had to start using Opera. That’s unfortunate. I sincerely hope that by the time we’re through beta and ready for official release, this problem is addressed somehow. Even if there has to be a toggle in Safari settings where we can decline the new toolbar feature and keep controlling our web interaction like we’ve done ever since…. Well, always. Just ANY solution that can guarantee the toolbar does not pop up and get in my way when I’m placing trades with my money!!!
I agree that it makes sense for more UI controls to be closer to where our fingers rest (and stay in a consistent spot). But I can't figure out what their reasoning was for having the address bar be a floating element. Why not just have it be anchored at the bottom of the UI, and have the bottom of the visible viewport always be above the bar? Screen real estate doesn't really make sense because I still can't see most of the screen behind the floating bar, and seeing partial information isn't useful. They could move it closer to the bottom, and still have it "minimize" on scroll and stuff. Can anyone think of a good reason why floating is a good idea/ what it accomplishes?
The bottom addressbar can be cleared by using the env() setting. You can add more padding to the bottom to make sure everything clears the addressbar.
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px)
;
The behavior isn't very consistent from what i've seen but this should help you out.
The most worst things it is a PAGE JUMP on "finger move to bottom" action.
Sorry to bump an old thread but even with using env(safe-area-inset-bottom) in my CSS to handle the address bar, I'm experiencing some weird rendering bug and what to know if others ran into this before or know a possible solution. Basically what's shown on the screen doesn't match the actual tap target area (see below screenshot). I was able to reproduce it in Twitter and also my own web application.
-
—
Razormaid
-
—
RizingSoul
Add a CommentThis moving the URL bar to cover the page THEN send you back to the top anyway is completely unusable and ridiculous.
as if it’s not confusing enough now we’re going to cover content on purpose?
if moving it to cover the page then why send the user back up to the top? Why not stay there? Because it makes no sense to begin with!
It actually does make a ton of sense, but clearly needs some significant adjustment during beta. As the iPhone and its screen have been getting wider and taller, one-hand usage that used to be almost inherent has turned into - at times - a sort balancing/hand-stretching procedure. Moving web navigation and control within easy thumb reach makes sense.
However, there’s definitely some current issues. Since every website ever in history has been designed with a layout where the address bar is up top, this new feature interferes with some sites - likely more than I know.
For me, I day-trade cryptocurrency options, and the platform I use has a gorgeously simple mobile interface when you go to the site. However. My “Buy” and “Sell” buttons are guess where? Bottom of the screen. If I want to get specific with my $ amount on a trade - say $103.55 - I can tap the digit field and a calculator-like keypad pops up…. At the BOTTOM.
The new toolbar/address bar covers up all those functions. I can try to and get it minimizes, bud still, the second I touch the screen it pops right back up in my way. I can go to the settings (3 dots) feature and select “Hide Toolbar”, but same problem…. The minute I touch the screen, there it is. Right in my way again.
I’ve used Safari 98% of the time on the internet for over a decade. Now to do my trading I’ve had to start using Opera. That’s unfortunate.
I sincerely hope that by the time we’re through beta and ready for official release, this problem is addressed somehow. Even if there has to be a toggle in Safari settings where we can decline the new toolbar feature and keep controlling our web interaction like we’ve done ever since…. Well, always.
Just ANY solution that can guarantee the toolbar does not pop up and get in my way when I’m placing trades with my money!!!