I’m testing my net 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 exploit:
backside: env(safe-area-inset-bottom);
to maintain UI above the iOS residence indicator / toolbar.
However on iOS 26 the brand new floating toolbar sits on prime of my tab switcher, fully blocking it.
I’m on the lookout for:
-
A strategy to get a sound backside offset, since env(safe-area-inset-bottom) at the moment returns a price that’s not practically giant sufficient to maintain content material above the toolbar.
-
A dependable strategy to detect when the brand new Liquid Glass toolbar is current (in order that i can change to a floating fashion tab switcher)
What i’ve tried to this point:
- (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 bit of, 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 unsure if this helps, however right here’s a minimal reproducible Stack Snippet:
/* --- non-obligatory js only for debugging --- */
operate updateMeter() '';
const textual content="safe-area-inset-bottom: " + (v.trim()
['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);
top: 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 stable rgba(0, 0, 0, 0.06);
z-index: 999;
backdrop-filter: blur(8px);
}
html,
physique {
top: 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;
}
/* --- non-obligatory css only for debugging --- */
.content material {
flex: 1 1 auto;
overflow: auto;
padding: 24px;
}
.field {
top: 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);
coloration: #fff;
padding: 6px 8px;
border-radius: 8px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
}<principal 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>
Attempt opening this inside an iOS WKWebView on iOS 26 or above (in-app
browser -> Telegram, Whatsapp, Discord, ...) to see the toolbar overlap
habits.
</p>
<p fashion="margin-top:110vh">Backside content material for scrolling demonstration.</p>
</div>
</principal>
<div class="tabbar" function="tablist" aria-label="Pretend 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>Observe: This received’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 just too small, so the Liquid Glass toolbar nonetheless overlaps my tab switcher.
What I didn’t strive but:
Checking the display screen top by way of JavaScript or some other JS options to get the right offset.
Further Notes:
Main Web sites like youtube appear to be affected aswell.