ios safari navigation bar height

Does Safari 15 finally fix viewport height?

Written by Luke Channings on June 11, 2021

The design for Safari 15 has been very controvercial, and has changed significantly since the beta that this article was based on Sadly, one of the casualties of the evolving design was the main thrust of this article: env(safe-area-inset-bottom) is no longer dynamically the height of the address bar in the final release.

TL;DR : No , but if you subtract env(safe-area-inset-bottom) from 100vh you'll get what you want .

Safari 15's UI is a radical departure from the previous version — and from web browsers in general — but does it fix the viewport height problem?

What is the viewport height problem again?

Mobile Safari has had problems related to 100vh not behaving like web developers expect 1 2 pretty much since the beginning. The main crux of the issue is that Mobile Safari's UI Chrome shrinks when you scroll, and expands again when you activate it. That means 100vh ("100% the height of the viewport") can't be a static number.

Let's start by understanding the definition of the vh unit 3 :

vh is defined as Equal to 1% of the height of the initial containing block . — Anthony Frehner

And here's the best explanation of the 100vh issues in Mobile Safari that I've seen so far,

The core issue is that mobile browsers (I’m looking at you, Chrome and Safari) have a “helpful” feature where the address bar is sometimes visible and sometimes hidden, changing the visible size of the viewport. Rather than adjusting the height of 100vh to be the visible portion of the screen as the viewport height changes, these browsers instead have 100vh set to the height of the browser with the address bar hidden. The result is that the bottom portion of the screen will be cut off when the address bar is visible, thus defeating the purpose of 100vh to begin with. — David Chanin , Avoid 100vh On Mobile Web

Let's put this new Safari to the test

I have a simple HTML page based on the example given in David's article. It has a header at the top and a button at the bottom, all wrapped in a 100vh container.

Safari's new floating address bar is displayed above our test button, which is more-or-less exactly the same behaviour as iOS 14.

So - Safari 15 does not change the behavour of 100vh 😢.

So what's the solution then?

It makes sense to me that the WebKit team wouldn't change the behaviour of the viewport unit, it's already well defined.

Do you remember when Apple introduced env() and safe-area-inset so that web developers could avoid their content being shown behind the notch 4 ?

Well in Safari 14, safe-area-inset-bottom is 0px whether the UI chrome is active or inactive, which is something that has annoyed me for a while.

safe-area-inset-bottom is 0px when the UI chrome is inactive in Safari 15 on iOS, and then the height of the collapsed chrome minus the height of the expanded chrome when the bar is expanded.

That means that to get a button to float at the bottom of the page, always above the UI Chrome, all you have to do is use calc(100vh - env(safe-area-inset-bottom)) .

Wrapping up

So not only does safe-area-inset-bottom work in Safari 15, it's animated !

I've been hoping that something to remedy the viewport height bug was coming since Jen Simmons (who joined the Safari / WebKit team in June 2020) was asking for feedback regarding viewport height issues.

Hey everyone who’s been frustrated that VH units in CSS don’t do what you need… can you describe your usecase? What layout are you creating? With which layout mechanism? What do you need? Screenshots & sample code appreciated. — Jen Simmons ( @jensimmons ) May 15, 2021

Have a feeling I’m going to be talking about Environment Variables a lot this week. They are really cool & supported! https://developer.mozilla.org/en-US/docs/Web/CSS/env() https://caniuse.com/css-env-function padding-bottom: calc(1rem + env(safe-area-inset-bottom)); -or- height: calc(100vh - env(safe-area-inset-bottom)); — Jen Simmons ( @jensimmons ) June 7, 2021

• https://bugs.webkit.org/show_bug.cgi?id=141832 ↩
• https://css-tricks.com/the-trick-to-viewport-units-on-mobile/ ↩
• https://github.com/w3c/csswg-drafts/issues/4329 ↩
• https://webkit.org/blog/7929/designing-websites-for-iphone-x/ ↩

Using Bottom Tab Bars on Safari iOS 15

Jun 17, 2021 (Updated Sep 23, 2021)

Apple recently announced the latest version of Safari on iOS 15 with a completely new design featuring a bottom floating tab bar. What does this mean for web developers and designers?

Safari on iOS has had a problem for a long time when it comes to building websites and web apps with bottom-aligned navigation due to the browser toolbar's dynamic height. As you scroll the toolbar disappears making any element that is fixed to the bottom of the screen look great, but as soon as you try to tap any link inside the browser toolbar appears again.

Sorry, your browser doesn't support embedded videos.

This makes for a really poor UX so designers and developers have mostly resorted to user "hamburger" menus instead. This is a shame as bottom tab bars increase discoverability by not hiding links behind a tap and are also easier to reach one-handed on todays large mobile devices.

Updates with Safari 15

Apple reverted some of these changes in the final iOS 15 release. The user can now choose between the old UI (top bar) or the new one. If they choose the new bottom bar UI it does not float as much greatly improving overlap issues. While you might not need safe areas anymore if you're lucky, I would still recommend to implement it as I've seen it cause issues anyways.

The new Safari 15 now has a tab bar floating at the bottom of the screen. At first it might seem like this makes it even harder to create tab bar navigations, and by browsing the web using iOS 15 it's easy to spot issues like this:

Fixing Tab Bar Overlap with Safe Areas

Thankfully solving this issue is very easy by using the env() CSS function together with safe-area-inset-bottom . This API was shipped with iOS 11 making it possible to customize how websites render when using devices with a notch. By inspecting pinterests code we can see that their tab bar has a fixed position anchored to the bottom, the relevant parts look something like this:

To respect the safe area and make sure that nothing from the browser UI overlaps let's add another bottom property with env(safe-area-inset-bottom) as a value. This function works like a CSS variable, returning the minimum amount of inset needed to keep your UI from overlapping with the browser's. We keep the old style rule as a fallback browsers that do not support it:

Now when scrolling nothing overlaps:

Be sure to use env() every time something is anchored to the bottom of the screen or overlap will likely appear. env() can also be combined with css calc() or min() and max() , so if your design needs more padding you can add it like this:

You can learn more about respecting the safe-area in this excellent article published on the webkit blog or Apple's WWDC session called Design for Safari 15 (Relevent part starts around 13 minutes in).

The best way to see if you got it right is to use a physical device with iOS 15, but if you don't have access to one you can download the Xcode 13 beta from Apples developer portal and use an iOS 15 simulator by going to Xcode > Open Developer Tool > Simulator

Tab Bar UX in iOS 15

Remember the issue in previous versions of Safari where you had to click twice when using bottom tab bars? Once for showing the safari toolbar and another tap for actually triggering your link? That is no longer an issue 🙌. Safari 15 now respects and follows links or buttons, which is a big improvement! Check out how much better Twitter's tabbar works when switching tabs on Safari 15:

Even if tab bars now technically work better than before we still have to consider the design and UX to create something that people understand and that looks good. The browser UI is now very bottom-heavy and placing more actions next to it might feel cluttered. What do you think? Let me know on twitter @samuelkraft .

I'm excited to see how everyone adapts to the new UI and if we will see a return of tab bars on the web or not.

Get an email when i write new posts. Learn animation techniques, CSS, design systems and more

Related posts

Dec 18, 2021

Dec 15, 2021

Sep 07, 2021

iOS 13 and NavigationBar size

We are currently having an issue with navigation bar sizing when using modal presentation in iOS 13.

In most cases this works fine as can be seen in this screenshot:

However, in a few screens we get this weird effect, with the navigation bar having a lower height and a weird "see-through" gap between it and the view. As seen in this screenshot:

Both of the view controllers have the same values set for their properties, are modally presented and have the same constrains on their subviews (0 spacing from the superview/margins/top layout guide).

This issue doesn't happen in iOS 12, even when built with the iOS 13 SDK. Is this a known issue in iOS 13 (beta 8), or is there something we should adjust in the code/storyboard?

When we lookk at the screenshot of the problem, it appears the navbar is dimensioned for the view that is stacked behind (smaller width and a few pixels above).

In the first (correct) screenshot, we see the view behind has a title. Not in the other.

How different are the views behind ?

In fact, I would guess this may come from the way IOS 13 handles UIModalPresentationAutomatic:

"Defaults to UIModalPresentationAutomatic on iOS starting in iOS 13.0, and UIModalPresentationFullScreen on previous versions"

Try changing the presentation to UIModalPresentationFullScreen and see what happens.

Read this for details:

h ttps://medium.com/@hacknicity/view-controller-presentation-changes-in-ios-13-ac8c901ebc4e

The view controllers are set to formsheet, not automatic. Setting the presentation style to fullscreen does solve the issue but also gets rid of the "sheet" effect. I rather have the new formsheet or pagesheet styles and those keep having the little gap between the view and the bar.

I have uploaded a test project demonstrating the issue: https://we.tl/t-ojnTek5t7X

@TTAppDev I'm experiencing the same issue. Did you find a workaround and/or file a bug report?

Unfortunately I did not find a workaround to get it working in a "Formsheet/PageSheet" presentation style. I adjusted the controllers to be "Fullscreen" to close the gap, but I still rather utilize the Form Sheet or Page Sheet styles. I have filed a bug report to Apple. Hopefully they can find and solve the issue.

The workaround here https://forums.developer.apple.com/message/378841 worked for me!

Salem issue when presenting form sheet over another morally presented auto or form sheet. .overContext kind of solves it but I want to know what is causing this gap and awkward sizing of navigation bar.

iPhone User Guide

• iPhone models compatible with iOS 17
• R ' class='toc-item' data-ss-analytics-link-url='https://support.apple.com/guide/iphone/iphone-xr-iph017302841/ios' data-ajax-endpoint='https://support.apple.com/guide/iphone/iphone-xr-iph017302841/ios' data-ss-analytics-event="acs.link_click" href='https://support.apple.com/guide/iphone/iphone-xr-iph017302841/ios' id='toc-item-IPH017302841' data-tocid='IPH017302841' > iPhone X R
• S ' class='toc-item' data-ss-analytics-link-url='https://support.apple.com/guide/iphone/iphone-xs-iphc00446242/ios' data-ajax-endpoint='https://support.apple.com/guide/iphone/iphone-xs-iphc00446242/ios' data-ss-analytics-event="acs.link_click" href='https://support.apple.com/guide/iphone/iphone-xs-iphc00446242/ios' id='toc-item-IPHC00446242' data-tocid='IPHC00446242' > iPhone X S
• S Max' class='toc-item' data-ss-analytics-link-url='https://support.apple.com/guide/iphone/iphone-xs-max-iphcd2066870/ios' data-ajax-endpoint='https://support.apple.com/guide/iphone/iphone-xs-max-iphcd2066870/ios' data-ss-analytics-event="acs.link_click" href='https://support.apple.com/guide/iphone/iphone-xs-max-iphcd2066870/ios' id='toc-item-IPHCD2066870' data-tocid='IPHCD2066870' > iPhone X S Max
• iPhone 11 Pro
• iPhone 11 Pro Max
• iPhone SE (2nd generation)
• iPhone 12 mini
• iPhone 12 Pro
• iPhone 12 Pro Max
• iPhone 13 mini
• iPhone 13 Pro
• iPhone 13 Pro Max
• iPhone SE (3rd generation)
• iPhone 14 Plus
• iPhone 14 Pro
• iPhone 14 Pro Max
• iPhone 15 Plus
• iPhone 15 Pro
• iPhone 15 Pro Max
• Setup basics
• Make your iPhone your own
• Take great photos and videos
• Keep in touch with friends and family
• Share features with your family
• Use iPhone for your daily routines
• Expert advice from Apple Support
• What’s new in iOS 17
• Turn on and set up iPhone
• Wake and unlock
• Set up cellular service
• Use Dual SIM
• Connect to the internet
• Sign in with Apple ID
• Subscribe to iCloud+
• Find settings
• Set up mail, contacts, and calendar accounts
• Learn the meaning of the status icons
• Charge the battery
• Charge with cleaner energy sources
• Show the battery percentage
• Check battery health and usage
• Use Low Power Mode
• Read and bookmark the user guide
• Learn basic gestures
• Learn gestures for iPhone models with Face ID
• Adjust the volume
• Find your apps in App Library
• Switch between open apps
• Quit and reopen an app
• Multitask with Picture in Picture
• Access features from the Lock Screen
• View Live Activities in the Dynamic Island
• Perform quick actions
• Search on iPhone
• Get information about your iPhone
• View or change cellular data settings
• Travel with iPhone
• Change sounds and vibrations
• Use the Action button on iPhone 15 Pro and iPhone 15 Pro Max
• Create a custom Lock Screen
• Change the wallpaper
• Adjust the screen brightness and color balance
• Keep the iPhone display on longer
• Use StandBy
• Customize the text size and zoom setting
• Change the name of your iPhone
• Change the date and time
• Change the language and region
• Organize your apps in folders
• Add, edit, and remove widgets
• Move apps and widgets on the Home Screen
• Remove apps
• Use and customize Control Center
• Change or lock the screen orientation
• View and respond to notifications
• Change notification settings
• Set up a Focus
• Allow or silence notifications for a Focus
• Turn a Focus on or off
• Stay focused while driving
• Customize sharing options
• Type with the onscreen keyboard
• Dictate text
• Select and edit text
• Use predictive text
• Use text replacements
• Add or change keyboards
• Add emoji and stickers
• Take a screenshot
• Take a screen recording
• Draw in documents
• Add text, shapes, signatures, and more
• Fill out forms and sign documents
• Use Live Text to interact with content in a photo or video
• Use Visual Look Up to identify objects in your photos and videos
• Lift a subject from the photo background
• Subscribe to Apple Arcade
• Play with friends in Game Center
• Connect a game controller
• Use App Clips
• Update apps
• View or cancel subscriptions
• Manage purchases, settings, and restrictions
• Install and manage fonts
• Buy books and audiobooks
• Annotate books
• Access books on other Apple devices
• Listen to audiobooks
• Set reading goals
• Organize books
• Create and edit events in Calendar
• Send invitations
• Reply to invitations
• Change how you view events
• Search for events
• Change calendar and event settings
• Schedule or display events in a different time zone
• Keep track of events
• Use multiple calendars
• Use the Holidays calendar
• Share iCloud calendars
• Camera basics
• Set up your shot
• Apply Photographic Styles
• Take Live Photos
• Take Burst mode shots
• Take a selfie
• Take panoramic photos
• Take macro photos and videos
• Take portraits
• Take Night mode photos
• Take Apple ProRAW photos
• Adjust the shutter volume
• Adjust HDR camera settings
• Record videos
• Record spatial videos for Apple Vision Pro
• Record ProRes videos
• Record videos in Cinematic mode
• Change video recording settings
• Save camera settings
• Customize the Main camera lens
• Change advanced camera settings
• View, share, and print photos
• Use Live Text
• Scan a QR code
• See the world clock
• Set an alarm
• Change the next wake up alarm
• Use the stopwatch
• Use multiple timers
• Add and use contact information
• Edit contacts
• Add your contact info
• Use NameDrop on iPhone to share your contact info
• Use other contact accounts
• Use Contacts from the Phone app
• Merge or hide duplicate contacts
• Export contacts
• Get started with FaceTime
• Make FaceTime calls
• Receive FaceTime calls
• Create a FaceTime link
• Take a Live Photo
• Turn on Live Captions in a FaceTime call
• Use other apps during a call
• Make a Group FaceTime call
• View participants in a grid
• Use SharePlay to watch, listen, and play together
• Share your screen in a FaceTime call
• Collaborate on a document in FaceTime
• Use video conferencing features
• Hand off a FaceTime call to another Apple device
• Change the FaceTime video settings
• Change the FaceTime audio settings
• Change your appearance
• Leave a call or switch to Messages
• Block unwanted callers
• Report a call as spam
• Connect external devices or servers
• Modify files, folders, and downloads
• Search for files and folders
• Organize files and folders
• Set up iCloud Drive
• Share files and folders in iCloud Drive
• Share your location
• Meet up with a friend
• Send your location via satellite
• Add or remove a friend
• Locate a friend
• Get notified when friends change their location
• Notify a friend when your location changes
• Add your iPhone
• Add your iPhone Wallet with MagSafe
• Get notified if you leave a device behind
• Locate a device
• Mark a device as lost
• Erase a device
• Remove a device
• Add an AirTag
• Share an AirTag or other item in Find My on iPhone
• Add a third-party item
• Get notified if you leave an item behind
• Locate an item
• Mark an item as lost
• Remove an item
• Adjust map settings
• Get started with Fitness
• Track daily activity and change your move goal
• See your activity summary
• Sync a third-party workout app
• Change fitness notifications
• Share your activity
• Subscribe to Apple Fitness+
• Find Apple Fitness+ workouts and meditations
• Start an Apple Fitness+ workout or meditation
• Create a Custom Plan in Apple Fitness+
• Work out together using SharePlay
• Change what’s on the screen during an Apple Fitness+ workout or meditation
• Download an Apple Fitness+ workout or meditation
• Get started with Freeform
• Create a Freeform board
• Draw or handwrite
• Apply consistent styles
• Position items on a board
• Search Freeform boards
• Share and collaborate
• Delete and recover boards
• Get started with Health
• Fill out your Health Details
• Intro to Health data
• View your health data
• Share your health data
• View health data shared by others
• Download health records
• View health records
• Monitor your walking steadiness
• Log menstrual cycle information
• View menstrual cycle predictions and history
• Track your medications
• Learn more about your medications
• Log your state of mind
• Take a mental health assessment
• Set up a schedule for a Sleep Focus
• Turn off alarms and delete sleep schedules
• Add or change sleep schedules
• Turn Sleep Focus on or off
• Change your wind down period, sleep goal, and more
• View your sleep history
• Check your headphone levels
• Use audiogram data
• Register as an organ donor
• Back up your Health data
• Intro to Home
• Upgrade to the new Home architecture
• Set up accessories
• Control accessories
• Control your home using Siri
• Use Grid Forecast to plan your energy usage
• Set up HomePod
• Control your home remotely
• Create and use scenes
• Use automations
• Set up security cameras
• Use Face Recognition
• Unlock your door with a home key
• Configure a router
• Invite others to control accessories
• Add more homes
• Get music, movies, and TV shows
• Get ringtones
• Manage purchases and settings
• Get started with Journal
• Write in your journal
• Review your past journal entries
• Change Journal settings
• Magnify nearby objects
• Change settings
• Detect people around you
• Detect doors around you
• Receive image descriptions of your surroundings
• Read aloud text and labels around you
• Set up shortcuts for Detection Mode
• Add and remove email accounts
• Set up a custom email domain
• Check your email
• Unsend email with Undo Send
• Reply to and forward emails
• Save an email draft
• Add email attachments
• Download email attachments
• Annotate email attachments
• Set email notifications
• Search for email
• Organize email in mailboxes
• Flag or block emails
• Filter emails
• Use Hide My Email
• Use Mail Privacy Protection
• Change email settings
• Delete and recover emails
• Add a Mail widget to your Home Screen
• Print emails
• Get travel directions
• Select other route options
• Find stops along your route
• View a route overview or a list of turns
• Change settings for spoken directions
• Get driving directions
• Get directions to your parked car
• Set up electric vehicle routing
• Report traffic incidents
• Get cycling directions
• Get walking directions
• Get transit directions
• Delete recent directions
• Get traffic and weather info
• Estimate travel time and ETA
• Download offline maps
• Search for places
• Find nearby attractions, restaurants, and services
• Get information about places
• Mark places
• Share places
• Rate places
• Save favorite places
• Explore new places with Guides
• Organize places in My Guides
• Delete significant locations
• Look around places
• Take Flyover tours
• Find your Maps settings
• Measure dimensions
• View and save measurements
• Measure a person’s height
• Use the level
• Set up Messages
• About iMessage
• Send and reply to messages
• Unsend and edit messages
• Keep track of messages
• Forward and share messages
• Group conversations
• Watch, listen, or play together using SharePlay
• Collaborate on projects
• Use iMessage apps
• Take and edit photos or videos
• Share photos, links, and more
• Send stickers
• Request, send, and receive payments
• Send and receive audio messages
• Animate messages
• Change notifications
• Block, filter, and report messages
• Delete messages and attachments
• Recover deleted messages
• View albums, playlists, and more
• Show song credits and lyrics
• Queue up your music
• Listen to broadcast radio
• Subscribe to Apple Music
• Play music together in the car with iPhone
• Listen to lossless music
• Listen to Dolby Atmos music
• Apple Music Sing
• Find new music
• Add music and listen offline
• Get personalized recommendations
• Listen to radio
• Search for music
• Create playlists
• See what your friends are listening to
• Use Siri to play music
• Change the way music sounds
• Get started with News
• Use News widgets
• See news stories chosen just for you
• Read stories
• Follow your favorite teams with My Sports
• Listen to Apple News Today
• Subscribe to Apple News+
• Browse and read Apple News+ stories and issues
• Download Apple News+ issues
• Listen to audio stories
• Solve crossword puzzles
• Search for news stories
• Save stories in News for later
• Subscribe to individual news channels
• Get started with Notes
• Add or remove accounts
• Create and format notes
• Draw or write
• Add photos, videos, and more
• Scan text and documents
• Work with PDFs
• Create Quick Notes
• Search notes
• Organize in folders
• Organize with tags
• Use Smart Folders
• Export or print notes
• Change Notes settings
• Make a call
• Answer or decline incoming calls
• While on a call
• Set up voicemail
• Check voicemail
• Change voicemail greeting and settings
• Select ringtones and vibrations
• Make calls using Wi-Fi
• Set up call forwarding and call waiting
• Avoid unwanted calls
• View photos and videos
• Play videos and slideshows
• Delete or hide photos and videos
• Edit photos and videos
• Trim video length and adjust slow motion
• Edit Cinematic mode videos
• Edit Live Photos
• Edit portraits
• Use photo albums
• Edit, share, and organize albums
• Filter and sort photos and videos in albums
• Make stickers from your photos
• Duplicate and copy photos and videos
• Merge duplicate photos and videos
• Search for photos
• Identify people and pets
• Browse photos by location
• Share photos and videos
• Share long videos
• View photos and videos shared with you
• Watch memories
• Personalize your memories
• Manage memories and featured photos
• Use iCloud Photos
• Create shared albums
• Add and remove people in a shared album
• Add and delete photos and videos in a shared album
• Set up or join an iCloud Shared Photo Library
• Add content to an iCloud Shared Photo Library
• Use iCloud Shared Photo Library
• Import and export photos and videos
• Print photos
• Find podcasts
• Listen to podcasts
• Follow your favorite podcasts
• Use the Podcasts widget
• Organize your podcast library
• Download, save, or share podcasts
• Subscribe to podcasts
• Listen to subscriber-only content
• Change download settings
• Make a grocery list
• Add items to a list
• Edit and manage a list
• Search and organize lists
• Work with templates
• Use Smart Lists
• Print reminders
• Use the Reminders widget
• Change Reminders settings
• Browse the web
• Search for websites
• Customize your Safari settings
• Change the layout
• Use Safari profiles
• Open and close tabs
• Organize your tabs
• View your Safari tabs from another Apple device
• Share Tab Groups
• Use Siri to listen to a webpage
• Bookmark favorite webpages
• Save pages to a Reading List
• Find links shared with you
• Annotate and save a webpage as a PDF
• Automatically fill in forms
• Get extensions
• Hide ads and distractions
• Clear your cache
• Browse the web privately
• Use passkeys in Safari
• Check stocks
• Manage multiple watchlists
• Read business news
• Add earnings reports to your calendar
• Use a Stocks widget
• Translate text, voice, and conversations
• Translate text in apps
• Translate with the camera view
• Subscribe to Apple TV+, MLS Season Pass, or an Apple TV channel
• Add your TV provider
• Get shows, movies, and more
• Watch sports
• Watch Major League Soccer with MLS Season Pass
• Control playback
• Manage your library
• Change the settings
• Make a recording
• Play it back
• Edit or delete a recording
• Keep recordings up to date
• Organize recordings
• Search for or rename a recording
• Share a recording
• Duplicate a recording
• Keep cards and passes in Wallet
• Set up Apple Pay
• Use Apple Pay for contactless payments
• Use Apple Pay in apps and on the web
• Track your orders
• Use Apple Cash
• Use Apple Card
• Use Savings
• Pay for transit
• Access your home, hotel room, and vehicle
• Add identity cards
• Use COVID-19 vaccination cards
• Check your Apple Account balance
• Use Express Mode
• Organize your Wallet
• Remove cards or passes
• Check the weather
• Check the weather in other locations
• View weather maps
• Manage weather notifications
• Use Weather widgets
• Learn the weather icons
• Find out what Siri can do
• Tell Siri about yourself
• Have Siri announce calls and notifications
• Add Siri Shortcuts
• About Siri Suggestions
• Use Siri in your car
• Change Siri settings
• Contact emergency services
• Use Emergency SOS via satellite
• Request Roadside Assistance via satellite
• Set up and view your Medical ID
• Use Check In
• Manage Crash Detection
• Reset privacy and security settings in an emergency
• Set up Family Sharing
• Add Family Sharing members
• Remove Family Sharing members
• Share subscriptions
• Share purchases
• Share locations with family and locate lost devices
• Set up Apple Cash Family and Apple Card Family
• Set up parental controls
• Set up a child’s device
• Get started with Screen Time
• Protect your vision health with Screen Distance
• Set up Screen Time
• Set communication and safety limits and block inappropriate content
• Charging cable
• Power adapters
• MagSafe chargers and battery packs
• MagSafe cases and sleeves
• Qi-certified wireless chargers
• Use AirPods
• Use EarPods
• Apple Watch
• Wirelessly stream videos and photos to Apple TV or a smart TV
• Connect to a display with a cable
• HomePod and other wireless speakers
• Pair Magic Keyboard
• Enter characters with diacritical marks
• Switch between keyboards
• Use shortcuts
• Choose an alternative keyboard layout
• Change typing assistance options
• External storage devices
• Bluetooth accessories
• Share your internet connection
• Allow phone calls on your iPad and Mac
• Use iPhone as a webcam
• Hand off tasks between devices
• Cut, copy, and paste between iPhone and other devices
• Stream video or mirror the screen of your iPhone
• Start SharePlay instantly
• Use AirDrop to send items
• Connect iPhone and your computer with a cable
• Transfer files between devices
• Transfer files with email, messages, or AirDrop
• Transfer files or sync content with the Finder or iTunes
• Automatically keep files up to date with iCloud
• Use an external storage device, a file server, or a cloud storage service
• Intro to CarPlay
• Connect to CarPlay
• Use your vehicle’s built-in controls
• Get turn-by-turn directions
• Change the map view
• Make phone calls
• View your calendar
• Send and receive text messages
• Announce incoming text messages
• Play podcasts
• Play audiobooks
• Listen to news stories
• Control your home
• Use other apps with CarPlay
• Rearrange icons on CarPlay Home
• Change settings in CarPlay
• Get started with accessibility features
• Turn on accessibility features for setup
• Change Siri accessibility settings
• Open features with Accessibility Shortcut
• Change color and brightness
• Make text easier to read
• Reduce onscreen motion
• Customize per-app visual settings
• Hear what’s on the screen or typed
• Hear audio descriptions
• Turn on and practice VoiceOver
• Change your VoiceOver settings
• Use VoiceOver gestures
• Operate iPhone when VoiceOver is on
• Control VoiceOver using the rotor
• Use the onscreen keyboard
• Write with your finger
• Use VoiceOver with an Apple external keyboard
• Use a braille display
• Type braille on the screen
• Customize gestures and keyboard shortcuts
• Use VoiceOver with a pointer device
• Use VoiceOver for images and videos
• Use VoiceOver in apps
• Use AssistiveTouch
• Adjust how iPhone responds to your touch
• Use Reachability
• Auto-answer calls
• Turn off vibration
• Change Face ID and attention settings
• Use Voice Control
• Adjust the side or Home button
• Use Apple TV Remote buttons
• Adjust pointer settings
• Adjust keyboard settings
• Adjust AirPods settings
• Turn on Apple Watch Mirroring
• Control a nearby Apple device
• Intro to Switch Control
• Set up and turn on Switch Control
• Select items, perform actions, and more
• Control several devices with one switch
• Use hearing devices
• Use Live Listen
• Use sound recognition
• Set up and use RTT and TTY
• Flash the LED for alerts
• Adjust audio settings
• Play background sounds
• Display subtitles and captions
• Show transcriptions for Intercom messages
• Get Live Captions (beta)
• Type to speak
• Record a Personal Voice
• Use Guided Access
• Use built-in privacy and security protections
• Set a passcode
• Set up Face ID
• Set up Touch ID
• Control access to information on the Lock Screen
• Keep your Apple ID secure
• Use passkeys to sign in to apps and websites
• Sign in with Apple
• Share passwords
• Automatically fill in strong passwords
• Change weak or compromised passwords
• View your passwords and related information
• Share passkeys and passwords securely with AirDrop
• Make your passkeys and passwords available on all your devices
• Automatically fill in verification codes
• Automatically fill in SMS passcodes
• Sign in with fewer CAPTCHA challenges
• Use two-factor authentication
• Use security keys
• Manage information sharing with Safety Check
• Control app tracking permissions
• Control the location information you share
• Control access to information in apps
• Control how Apple delivers advertising to you
• Control access to hardware features
• Create and manage Hide My Email addresses
• Protect your web browsing with iCloud Private Relay
• Use a private network address
• Use Advanced Data Protection
• Use Lockdown Mode
• Use Stolen Device Protection
• Receive warnings about sensitive content
• Use Contact Key Verification
• Turn iPhone on or off
• Force restart iPhone
• Back up iPhone
• Return iPhone settings to their defaults
• Restore all content from a backup
• Restore purchased and deleted items
• Sell, give away, or trade in your iPhone
• Erase iPhone
• Install or remove configuration profiles
• Important safety information
• Important handling information
• Find more resources for software and service
• FCC compliance statement
• ISED Canada compliance statement
• Ultra Wideband information
• Class 1 Laser information
• Apple and the environment
• Disposal and recycling information
• Unauthorized modification of iOS

Change the layout in Safari on iPhone

DEV Community

Posted on Dec 13, 2020 • Updated on Nov 29, 2021 • Originally published at Medium

100vh problem with iOS Safari

The web content it's outside the viewport although we used 100vh (the red opacity box with 100vh text).

The problem you have been receiving after adding the height: 100vh to mobile resolutions. It happens due to the calculation method which Safari and Chrome are using. Mobile devices calc browser viewport as ( top bar + document + bottom bar ) = 100vh . I had a hard time with 100vh when the page have to have a section filled the whole screen. After a couple of hours, I've found the solutions that I show you.

They are two solutions, the first needs JavaScript and CSS, the second solution required only CSS.

1. JS & CSS solution

Let’s get started first with the JS file:

appHeight function has sets new style property var( --app-height ) including current window height, --app-height it is necessary for next steps.

In the previous step I've created the reference --app-height , wrapping in the var() I've received CSS variable var(--app-height) . This variable is allowed to read values created by JS.

2. CSS solution (not recommend)

The last, but not the least solution is --webkit-fill-available , this solution works only on Apple devices, it won't solve the problem on Android devices. I don't recommend this solution, but it's worth showing.

Thank you for your attention! I’ll appreciate your feedback.

If you like this article, follow me on Twitter @MaciejDEV

Top comments (13)

Templates let you quickly answer FAQs or store snippets for re-use.

• Email [email protected]
• Joined Aug 14, 2022

thanks this is pretty easy. It's important to mention you'll want to run this on window resize events if you intend to allow your users to resize

• Location Lisbon, Portugal
• Work Designer at Expa
• Joined May 19, 2019

My approach is to disable the show/hide of the safari bars by preventing the body from scrolling. That way the content area height is constant.

• Location Poznań, Poland
• Work Front-End Developer at Tonik
• Joined Jun 12, 2020

Hi, It will work, but you have to remember about for example scrollTo and #anchors in this solution.

• Joined Jul 24, 2017

nice! thanks for posting, this is the most effective solve I've found.

something thing I noticed after implementing this solution is that it can trigger the fabled 'jumpy scroll', referenced in the stack overflow post I'm sure we all landed on before finding this post. stackoverflow.com/questions/371122...

as a workaround I created two css variables, one for the fixed "starting" height, and another "dynamic" height that is only used for the shopping cart, mobile menu and other fixed-position elements that require 100% screen height.

pasted below in case someone else runs into the same issue!

// set up css var for starting app height. this will not change on resize so we can avoid the jumpy scroll issue const appHeight = () => { const doc = document.documentElement; doc.style.setProperty('--app-height', ${window.innerHeight/10}rem ) }; window.addEventListener('orientationchange', appHeight); appHeight();

// set up css var for dynamic app height. this is just for the cart and mobile menu since they need to be fixed to size at all times.

const dynamicAppHeight = () => { const doc = document.documentElement; doc.style.setProperty('--dynamic-app-height', ${window.innerHeight/10}rem ) }; window.addEventListener('resize', dynamicAppHeight); dynamicAppHeight();

• Joined Jan 20, 2021

Hi, see: dev.to/admitkard/mobile-issue-with... Same issue, but again - on current Safari it is NOT working! Even on Android devices, I see the same issue.

So is there a working solution if the address bar moves away (no resize/switch to landscape etc.).

• Location Enschede, NL
• Work Entrepreneur at self-employed
• Joined Dec 8, 2020

I’m confused 🤣

So what are you saying? That the JS solution in this thread doesn’t work but the one you linked does?

• Joined Sep 18, 2019

Hi could you please also illustrate the problem? thanks!

Hi clivend,

Yes, sure I will illustrate the problem today/tomorrow. Thanks for letting me know what is missing!

• Joined Sep 22, 2021

This majorly helped with a college project of mine, thank you for writing this!

• Email [email protected]
• Location France
• Education Self Taught
• Work Junior Full Stack Developer
• Joined Jul 3, 2020

Actually, it's not only on safari. I had the exact same problem on chrome / brave and used the first solution for one of my latest projects ;)

Hi ips-coding-challenge,

yes, you are right, I missed issue with OnePlus what I had last year. 🙏

• Joined Apr 10, 2023

• Work Agency Owner
• Joined Jan 2, 2023

But how to set for only one page? This solution applies to all pages.

Thanks again.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

HOW TO LAZY LOAD IMAGE IN REACTJS

Candie - Mar 26

An ancient and very capable MVC Javascript framework

artydev - Apr 9

Submission for DEV Challenge v24.03.20: CSS Art - Favorite Snack

P V D SIVA KRISHNA - Mar 25

Always unsubscribe. No exceptions. Debate closed.

Daniel Glejzner - Apr 11

We're a place where coders share, stay up-to-date and grow their careers.

Overlapping bottom navigation bar despite 100vh in iOS Safari

»100vh« may not behave as expected for some mobile browsers and the bottom of your content will be partially hidden behind the browser’s bottom bar (i.e. below the »fold«).

First of all, let’s have a look at the issue by checking out the following example. It’s a simple page with 2 absolutely positioned boxes in the top left corner ( .top ) and the right bottom corner ( .bottom ). These boxes are wrapped within an element ( .container ) with a width of 100vw and a height of 100vh . You may have something similar in your project, such as a fullscreen modal/lightbox with a header/footer.

This should span accross the full viewport, right? Well, in the left screenshot below, you can see that in iOS Safari the bottom navigation bar actually overlaps your content, i.e. your content is below the »fold«—although you may have expected that it’s not part of the viewport.

In the right screenshot, you can see how one would expect the layout to be. The container spans between the top address bar and the bottom navigation bar.

This is a well-known issue and unfortunately intentional, as it prevents other problems, as Benjamin Poulain explained in his reply to a WebKit bug ticket regarding this issue.

This is completely intentional. It took quite a bit of work on our part to achieve this effect.

The base problem is this: the visible area changes dynamically as you scroll. If we update the CSS viewport height accordingly, we need to update the layout during the scroll. Not only that looks like shit, but doing that at 60 FPS is practically impossible in most pages (60 FPS is the baseline framerate on iOS).

It is hard to show you the "looks like shit" part, but imagine as you scroll, the contents moves and what you want on screen is continuously shifting.

Dynamically updating the height was not working, we had a few choices: drop viewport units on iOS, match the document size like before iOS 8, use the small view size, use the large view size.

From the data we had, using the larger view size was the best compromise. Most website using viewport units were looking great most of the time.

So, it’s not a bug—and no fix is planned for this.

Luckily, this doesn't have to be the most depresssing answer ever. How do we go on from this? There’s a couple of solutions.

Depending on your use case, it may be enough to simply use 100% instead of 100vh , especially for fixed/sticky elements (as 100% will be relative to the »real« viewport).

However, if your element is nested somewhere in the DOM, this may not work out (as 100% will be relative to the parent elements which are only as tall as the content they contain). And that may have been the motivation why you wanted to use 100vh in the first place.

stretch / -webkit-fill-available

Intrinsic and extrinsic sizing is a new CSS functionality that extends the sizing properties with keywords that represent content-based »intrinsic« sizes and context-based »extrinsic« sizes. This allows CSS to more easily describe boxes that fit their content or fit into a particular layout context.

One of these keywords is stretch which formerly was known as fill , fill-available , and its prefixed spin-offs -moz-available and -webkit-fill-available . We can make use of this functionality and because CSS skips over style declarations it doesn’t understand, we can implement fallbacks for all of these possible implementations.

(Hint: Autoprefixer will compile stretch to -webkit-fill-available and -moz-available automatically.)

JavaScript is always the »last stronghold« for stuff that’s not possible with pure CSS. Using CSS variables, you can pass the value of window.innerHeight into your CSS and update this variable every time the viewport is resized.

In your CSS, you can consume this variable as follows.

If you can’t use CSS variables in your project (e.g. due to browser support concerns), you can also update the height of your affected elements directly from within your script.

Unfortunately, there isn’t a one-size-fits-all solution for this issue. You should try the aforementioned solutions top down and be very conscientious with your cross-browser/cross-device testing.

• Discuss on Twitter
• Edit on GitHub

• Selected Reading
• UPSC IAS Exams Notes
• Developer's Best Practices
• Questions and Answers
• Effective Resume Writing
• HR Interview Questions
• Computer Glossary

How to get the Navigation Bar height in iOS?

A navigation bar appears at the top of an app screen. To read more about it

https://developer.apple.com/design

https://developer.apple.com/documentation

Getting height of Navigation bar becomes important if you’ve multiple view controllers having different UI and requirement. It becomes hectic if you’re not aware how to get the height of the same or modify as per need. Let’s see how we can get the height of Navigation bar.

I love programming (: That's all I know

Related Articles

• How to create transparent Status Bar and Navigation Bar in iOS?
• How to set background for Navigation Bar in iOS?
• Adding Navigation Bar programmatically iOS using Swift
• How do I get the height and width of the Android Navigation Bar programmatically?
• How do I get the height and width of the Android Navigation Bar programmatically using Kotlin?
• How can I change the text color of the Navigation Bar on iOS?
• How to get the Action bar height in android?
• How to display a black navigation bar in Bootstrap?
• How to create a navigation bar with equal-width navigation links with CSS?
• How to permanently hide Navigation Bar in an Android Activity?
• How to create a dropdown navigation bar with CSS?
• How to add link dividers in a Navigation Bar with CSS
• How to create a responsive navigation bar with dropdown in CSS?
• How to permanently hide the Navigation Bar in an Android activity using Kotlin?
• How to create Tab Bar Layout in an iOS App?

Kickstart Your Career

Get certified by completing the course

The trick to viewport units on mobile

Viewport units have always been controversial and some of that is because of how mobile browsers have made things more complicated by having their own opinions about how to implement them.

Case in point: should the scrollbar be taken into account for the vw unit? What about a site’s navigation or page controls — should those count in the calculation? Then there are physical attributes of the devices themselves (hello, notch !) that can’t be overlooked.

First, a little context

The spec is pretty vague about how viewport units should be calculated. With mobile devices, we’re often concerned with the vertical height, so let’s look specifically at viewport height ( vh ):

vh unit Equal to 1% of the height of the initial containing block.

So yeah, no clear guidance there when it comes to handling device and browser-specific differentiations.

vh was initially calculated by the current viewport of your browser. If you opened your browser and started to load a website, 1vh was equal to 1% of your screen height, minus the browser interface.

But! If you start scrolling, it’s a different story. Once you get past a piece of the browser interface, like the address bar, the vh value would update and the result was an awkward jump in the content.

Safari for iOS was one of the first mobile browsers to update their implementation by choosing to define a fixed value for the vh based on the maximum height of the screen. By doing so, the user would not experience jumps on the page once the address bar went out of view. Chrome’s mobile browser followed suit around a year ago .

As of this writing, there is a ticket to address this in Firefox Android .

While using a fixed value is nice, it also means that you cannot have a full-height element if the address bar is in view. The bottom of your element will be cropped.

CSS Custom Properties: The trick to correct sizing

The idea struck me that CSS Custom Properties and a few lines of JavaScript might be the perfect way to get the consistent and correct sizing I needed.

In JavaScript, you can always get the value of the current viewport by using the global variable window.innerHeight . This value takes the browser’s interface into account and is updated when its visibility changes. The trick is to store the viewport value in a CSS variable and apply that to the element instead of the vh unit.

Let’s say our CSS custom variable is --vh for this example. That means we will want to apply it in our CSS like this:

OK, that sets us up. Now let’s get the inner height of the viewport in JavaScript:

We told JavaScript to grab the height of the viewport and then drilled it down into 1/100th of that total so we have a value to assign as our viewport height unit value. Then we politely asked JS to create the CSS variable ( --vh ) at the :root .

As a result, we can now use --vh as our height value like we would any other vh unit, multiply it by 100 and we have the full height we want.

There is another fix for this that has come along more recently. Matt Smith documents it here . The trick is min-height: -webkit-fill-available; on the body as a progressive enhancement over 100vh , which should work on iOS devices.

Whoa, there! One more little detail.

While our work might look done at this point, those of you with an astute eye for detail may have caught that the JavaScript fires but never updates the size of our element when the viewport’s height changes. Go ahead and try resizing the demo above.

We can update the value of --vh by listening to the window resize event. This is handy in case the user rotates the device screen, like from landscape to portrait, or the navigation moves out of view on scroll.

⚠️ Updating the value of --vh will trigger a repaint of the page and the user may experience a jump as a result. Because of this, I’m not advising that this trick should be used for every project or to replace all usage of the vh unit but only when you may need your users to have an exact viewport unit value.

Also, you may want to implement a debounce method for the resize event to avoid triggering to many events while the user is resizing their browser’s window. You can learn more about it with this article: Debouncing and Throttling Explained Through Examples

You can now resize the demo above and notice that the CSS variable is updated accordingly.

While I recently used this technique on a project and it really helped, you should always think twice when replacing the browser’s default behaviors. (For example, this comes up a lot with ::focus .) Also, browsers tend to update very fast these days, so beware that today’s solution may not work tomorrow.

In the meantime, I hope this article helps! 👋

Here’s a proposal for vhc and vwc units that may be a savior in all this.

You should really use some kind of throtteling when listening to the resize event especially if it is triggering a repaint — for example like documented here: https://devdocs.io/dom_events/resize

Thanks for your feedback, I added a small note the debounce technique but I didn’t want to add extra code into the demos to keep them clear ✌️

Haven’t tried that yet but I struggled with that problem for months! Thank you very much will try this to fix my website soon.

Could you elaborate your use case? You need an in-flow full-height element at the top of the page?

I’ve read somewhere (I think, on nngroup.com) that it’s best to make such an element slightly smaller, so that the user knows that they can scroll down. (Apparently, some users will assume that there is no content below.)

That’s exactly the use case where I needed it. The first screen of the website was supposed to be full-height on mobile but we got the bottom cropped (which was the client’s logo). You could also use this trick if you have a modal that should be 100vh and you don’t want your users to loose the bottom part because of the browser’s interface.

I was struggling with this exact issue a month ago and came up with similar solution :D

I wasn’t doing –vh in root but in that element that needed vh unit only and with jQuery as the project was in jQuery. But the concept is the same.

Similar fix width modal overlay, when body tag overflow hidden:

in js: function getScrollbarWidth() { return window.innerWidth – document.documentElement.clientWidth; } document.documentElement.style.setProperty(‘–scrollbar-width’, ${getScrollbarWidth()}px );

in css: body.modal-opened { padding-right: calc(var(–scrollbar-width)); }

Just a side node – probably it’s better to call variable –vh100, as long it is “100vh”, not a single unit.

If you only need full-height elements, yes you could skip the calc part and set the variable to 100% of window.innerHeight. But if you need an element to be 50vh or else, you can use the variable and multiple it like so: height: calc(var(--vh, 1vh) * 50);

A really nice solution.

However there is a problem – if any script execution fails, JS fails to load or loading takes a long time, you’re going to have an unusable site.

Add a .js class to the body and make the calc height apply only when JS has loaded – The 100vh is both the fallback and non-js/slow loading version

There is already a fallback in the CSS in case the JavaScript doesn’t run. In this line: height: calc(var(--vh, 1vh) * 100); there is var(--vh, 1vh) where 1vh is a fallback. This is not really mentioned in the article but CSS Custom Properties can have fallback if the property is not defined. You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/var You could also add a default value on the root in your CSS.

I use the following code, never had an issue with 100vh not actually occupying the whole height.

This gets rid of the default behaviour. To me it looks like the issue you are having is caused by it.

After that IIjust manually add margins and padding as needed.

I got that working on chrome on my mobile device, but it is not working for Safari :(

Louis, please ignore my first comment, after looking into issue myself I have discovered more than I had hoped for. I always assumed that viewport height would be.. you know viewport height. Not the the mess it actually is.

So I have been researching a bit.. it appears that only solution that is somewhat reliable is the one you write about in your post maybe with some media queries… I am currently looking into it.

Meanwhile I made a little demo which seems to work fine, sort of… Ill try to use orientationchange event listener to handle the change of orientation and manually adjust height of pages which are below first 2 screen heights, because the URL bar will be always hidden at that point.

http://www.patriklegard.com/app

THANK YOU – this issue has irritated me for ages, and it seems obvious now but it actually never occurred to me to solve the problem this way using innerheight.

I wouldn’t recommend using the resize event though since the height of the element is then forced to change as you scroll on mobile(especially evident on safari ios). Meaning if there’s a background image on the element that is set to cover it makes the background position change, and will also affect any absolute positioned things inside that element too.

To avoid this issue I let the script only update my vh var when the resize is substantial enough(or in this case any landscape mode, mostly the desktop users)

I am running into this issue on an aside with a sticky footer. I always want the footer to be visible since it contains the cancel and submit buttons but depending on scrolling it might show correcrly and it might not. Do you have any suggestions on a sticky footer in an aside on a mobile device?

Just in case somebody else runs into this issue, apparently in Chrome, window.innerHeight doesn’t return the correct viewport height if you’re in Device Mode in Dev Tools. I was trying to use this method on a personal website of mine but was stumped when I went into device mode to check how it looks on iOS and the console log showed a different value for innerHeight then the device viewport height. Firefox and Safari showed correct values but Chrome did not.

I found this article which seems to clarify the reason: https://developers.google.com/web/updates/2017/09/visual-viewport-api

I needed to console log window.visualViewport.width if I wanted Chrome to use the visual viewport of the device. But if you’re actually on your mobile device innerHeight works fine, it’s just that when you’re emulating a mobile device on your laptop in Chrome dev tools innerHeight is not going to work as you may expect.

oops I meant window.visualViewport.height

Just nitpicking but might as well swap that let for const .

Enjoy this cheat sheet at its fullest within Dash , the macOS documentation browser.

Resolutions, common design elements, default font sizes iphone 5/5c/5s/se/6/6s/7/8, default font sizes iphone 6 plus/6s plus/7 plus/8 plus, default font sizes iphone x/xs/11 pro/xs max/11 pro max, default font sizes iphone xr/11, size classes for adaptive layout.