I’m testing my internet app inside in-app WKWebViews (Discord, Telegram, customized apps, and so forth.) on iOS 26.x.
Apple launched a brand new Liquid Glass floating toolbar on the backside of webviews, and it overlaps my fastened backside tab switcher more often than not.
Usually, I take advantage of:
backside: env(safe-area-inset-bottom);
to maintain UI above the iOS house indicator / toolbar.
However on iOS 26 the brand new floating toolbar sits on prime of my tab switcher, utterly blocking it.
I’m on the lookout for:
-
A technique to get a sound backside offset, since env(safe-area-inset-bottom) at present returns a price that’s not practically massive sufficient to maintain content material above the toolbar.
-
A dependable technique to detect when the brand new Liquid Glass toolbar is current (in order that i can swap to a floating fashion tab switcher)
What i’ve tried to date:
- (Backside Offset)
I’ve tried counting on env(safe-area-inset-bottom).
On preliminary web page load, the inset returns 0 inside WKWebViews. After scrolling a little bit, the worth updates, however it’s nonetheless not sufficient to clear the brand new toolbar.
These screenshots are taken from the official WebKit protected space demo
I’m undecided if this helps, however right here’s a minimal reproducible Stack Snippet:
/* --- elective js only for debugging --- */
operate updateMeter() '0px');
const m = doc.getElementById('meter');
if (m) m.textContent = textual content;
['load', 'resize', 'orientationchange', 'scroll', 'touchend'].forEach(ev =>
window.addEventListener(ev, updateMeter, {
passive: true
})
);
updateMeter();:root {
--safe-bottom: env(safe-area-inset-bottom);
}
.tabbar {
place: fastened;
left: 0;
proper: 0;
backside: env(safe-area-inset-bottom);
peak: 56px;
background: rgba(255, 255, 255, 0.95);
show: flex;
hole: 12px;
align-items: heart;
justify-content: heart;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
border: 1px strong rgba(0, 0, 0, 0.06);
z-index: 999;
backdrop-filter: blur(8px);
}
html,
physique {
peak: 100%;
margin: 0;
}
physique {
min-height: -webkit-fill-available;
show: flex;
flex-direction: column;
background: #f4f6f8;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* --- elective css only for debugging --- */
.content material {
flex: 1 1 auto;
overflow: auto;
padding: 24px;
}
.field {
peak: 220vh;
background: linear-gradient(180deg, #fff 0%, #eef3f8 100%);
border-radius: 12px;
padding: 20px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}
.tabbar .merchandise {
flex: 1 0 auto;
text-align: heart;
padding: 8px 12px;
font-size: 14px;
}
.meter {
place: fastened;
left: 12px;
backside: calc(56px + 20px);
background: rgba(0, 0, 0, 0.6);
shade: #fff;
padding: 6px 8px;
border-radius: 8px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
}<essential class="content material">
<div class="field">
<h1>Scrollable web page</h1>
<p>
Scroll down to breed: fastened tabbar makes use of
<code>env(safe-area-inset-bottom)</code>.
</p>
<p>
Strive opening this inside an iOS WKWebView on iOS 26 or above (in-app
browser -> Telegram, Whatsapp, Discord, ...) to see the toolbar overlap
conduct.
</p>
<p fashion="margin-top:110vh">Backside content material for scrolling demonstration.</p>
</div>
</essential>
<div class="tabbar" function="tablist" aria-label="Faux tab switcher">
<div class="merchandise">Tab1</div>
<div class="merchandise">Tab2</div>
<div class="merchandise">Tab3</div>
</div>
<div class="meter" id="meter">safe-area-inset-bottom: unknown</div>Be aware: This gained’t reproduce the problem on desktop browsers — it solely seems inside sure iOS in-app webviews.
- (Detection)
I thought-about utilizing the person agent to detect iOS 26+, however this turned out to be very unreliable — particularly inside some in-app browsers the place person brokers are overwritten.
What I anticipated:
That env(safe-area-inset-bottom) would mirror the right offset and forestall my tab switcher from being overlapped.
What really occurs:
• Inset stories 0 at first.
• Generally updates after scrolling.
• Even then, the worth is simply too small, so the Liquid Glass toolbar nonetheless overlaps my tab switcher.
What I didn’t strive but:
Checking the display screen peak through JavaScript or every other JS options to get the right offset.
Extra Notes:
Main Web sites like youtube appear to be affected aswell.
