I’m testing my internet app inside in-app WKWebViews (Discord, Telegram, customized apps, and many others.) 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 high of my tab switcher, fully blocking it.
I’m in search of:
-
A method to get a legitimate backside offset, since env(safe-area-inset-bottom) at present returns a worth that’s not practically massive sufficient to maintain content material above the toolbar.
-
A dependable method 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 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 just a little, 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:
/* --- optionally available js only for debugging --- */
perform updateMeter()
['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: middle;
justify-content: middle;
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 {
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;
}
/* --- optionally available 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: middle;
padding: 8px 12px;
font-size: 14px;
}
.meter {
place: fastened;
left: 12px;
backside: calc(56px + 20px);
background: rgba(0, 0, 0, 0.6);
colour: #fff;
padding: 6px 8px;
border-radius: 8px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
}<primary 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>
</primary>
<div class="tabbar" position="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>Notice: This gained’t reproduce the problem on desktop browsers — it solely seems inside sure iOS in-app webviews.
- (Detection)
I thought-about utilizing the consumer agent to detect iOS 26+, however this turned out to be very unreliable — particularly inside some in-app browsers the place consumer brokers are overwritten.
What I anticipated:
That env(safe-area-inset-bottom) would mirror the proper offset and forestall my tab switcher from being overlapped.
What really occurs:
• Inset experiences 0 at first.
• Typically 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 attempt but:
Checking the display screen top through JavaScript or some other JS options to get the proper offset.
Further Notes:
Main Web sites like youtube appear to be affected aswell.
