Menu
Using iOS 15.0.2 Safari, when the on-screen keyboard is dismissed, the address bar can become minimized without updating the viewport height. This results a bottom gap that cannot be removed without pressing the address bar. Are there any known workarounds to this? It's possible to get to this state without any device rotations by using nested containers, but the simplest reproducible example that I could come up with is as follows:
body {
padding: 0;
margin: 0;
overflow: hidden;
position: fixed;
inset: 0;
-webkit-text-size-adjust: 100%;
}
input {
font-size: 16px;
}<head>
<meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#000000">
</head>
<body>
<input type="text" />
</body>
706
If you want to move it back to the bottom of the screen, tap the AA button in Safari and select Show Bottom Tab Bar. Another way to move the address bar, is to go into Settings and tap on Safari. Scroll down to the Tabs section. From there you can tap Tab Bar to have everything on the bottom.
Open the Settings app. Scroll down and tap Safari. Scroll down to the Tabs section and locate the option to switch between the Tab Bar and a Single Tab. Select Single Tab to move the Address Bar back to the top of the screen, or select Tab Bar to move it back to the bottom if you change your mind later on.
Open your iPhone's Settings. Scroll down to "Safari" and tap it. Under "Tabs," switch "Tab Bar" to "Single Tab."
I have recently faced the same problem, when setting the body position to fixed to block scrolling while an overlay is displayed. As soon as the scrolling is disabled, Safari stops rendering the lower area which would be covered by the expanded iOS UI, leaving behind the same black bar as you're showing in your screenshot.
Setting html.style.height to 100vh while the body is set to position: fixed seems to fix the issue.
I have build a simple example page where you can see the difference.
After you open the page, you have to scroll down a little towards the buttons to collapse the Safari UI. Then you can toggle position: fixed or the code-to-fix-error class (to fix the error) by clicking the buttons.
In my example of the scroll blocking:
Setting the height to calc(100vh - 1px) would also prevent the safari native rubber band / elastic scrolling effect while the the popup is active. This change should only be applied to iOS devices tho.
const btnError = document.querySelector('button.error')
btnError
.addEventListener('click', () => {
btnError.innerHTML = document.documentElement.classList.toggle('code-to-fix-error')
? 'Fix active'
: 'Fix inactive'
})
let y = 0
const btnToggle = document.querySelector('button.toggle')
btnToggle
.addEventListener('click', () => {
const _doc = document.documentElement
if (_doc.classList.contains('active')) {
_doc.style.setProperty('--scroll-y', `0`)
_doc.classList.remove('active')
window.scroll(0, y)
btnToggle.innerHTML = 'position: static'
} else {
y = window.scrollY
_doc.style.setProperty('--scroll-y', `-${y}px`)
_doc.classList.add('active')
btnToggle.innerHTML = 'position: fixed'
}
})body {
padding: 400px 0 0 0;
margin: 0;
inset: 0;
-webkit-text-size-adjust: 100%;
background-color: #435283;
text-align: center;
height: 8000px;
width: 100%;
}
html.code-to-fix-error.active {
height: 100vh;
}
html.active body {
top: var(--scroll-y);
overflow: hidden;
position: fixed;
}
button {
appearance: none;
line-height: 30px;
padding: 0 10px;
background-color: #FFF;
color: #435283;
border-radius: 3px;
}<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1, viewport-fit=cover">
<meta name="theme-color" content="#000000">
<style>/* styles here */</style>
</head>
<body>
<button class="error">Fix inactive</button>
<button class="toggle">position: static</button>
<style>/* script here */</style>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
