Мобильная версияApple представила новую плавучую панель с жидким стеклянным плаванием в нижней части веб-просвети, и это переключает мой фиксированный нижний переключатель.
Код: Выделить всё
bottom: env(safe-area-inset-bottom);< /code> < /p>
для поддержания пользовательского интерфейса над индикатором /панелью инструментов для iOS. src = "https://i.sstatic.net/2bptg5m6.jpg"/>
[b] Я ищу: [/b]
В настоящее время неплохое, что не так, как достаточно. Панель инструментов. < /p>
< /li>
надежный способ обнаружения, когда присутствует новая панель инструментов жидкого стекла (так что я могу переключиться на переключатель вкладки с плавающим стилем) < /p>
< /li>
< /ol>
. />
(внизу смещение) < /li>
< /ol>
Я пытался полагаться на Env (безопасная зона-inset-bottom). < /p>
На начальной странице нагрузки вставка возвращает 0 внутри Wkwebviews. After scrolling a little, the value updates, but it’s still not enough to clear the new toolbar.
[img]https://i.sstatic.net/E4MxCgNZ.png[/img]
Эти скриншоты взяты из официальной демонстрации безопасной области Webkit
Я не уверен, помогает ли это, но это минимальный репродуктивный стек -snippet: . />
/* --- optional js just for debugging --- */
function updateMeter() {
const v = getComputedStyle(document.documentElement).getPropertyValue('--safe-bottom') || '';
const text = 'safe-area-inset-bottom: ' + (v.trim() || '0px');
const m = document.getElementById('meter');
if (m) m.textContent = text;
}
['load', 'resize', 'orientationchange', 'scroll', 'touchend'].forEach(ev =>
window.addEventListener(ev, updateMeter, {
passive: true
})
);
updateMeter();< /code>
:root {
--safe-bottom: env(safe-area-inset-bottom);
}
.tabbar {
position: fixed;
left: 0;
right: 0;
bottom: env(safe-area-inset-bottom);
height: 56px;
background: rgba(255, 255, 255, 0.95);
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
border: 1px solid rgba(0, 0, 0, 0.06);
z-index: 999;
backdrop-filter: blur(8px);
}
html,
body {
height: 100%;
margin: 0;
}
body {
min-height: -webkit-fill-available;
display: flex;
flex-direction: column;
background: #f4f6f8;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* --- optional css just for debugging --- */
.content {
flex: 1 1 auto;
overflow: auto;
padding: 24px;
}
.box {
height: 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 .item {
flex: 1 0 auto;
text-align: center;
padding: 8px 12px;
font-size: 14px;
}
.meter {
position: fixed;
left: 12px;
bottom: calc(56px + 20px);
background: rgba(0, 0, 0, 0.6);
color: #fff;
padding: 6px 8px;
border-radius: 8px;
font-size: 12px;
z-index: 1000;
pointer-events: none;
}< /code>
Scrollable page
Scroll down to reproduce: fixed tabbar uses
env(safe-area-inset-bottom)Try opening this inside an iOS WKWebView on iOS 26 or above (in-app
browser -> Telegram, Whatsapp, Discord, ...) to see the toolbar overlap
behavior.
Bottom content for scrolling demonstration.
Tab1
Tab2
Tab3
safe-area-inset-bottom: unknown< /code>
< /div>
< /div>
< /p>
Примечание. Это не воспроизводит проблему в браузерах настольных компьютеров-он появляется только внутри определенных веб-просмотров IOS. Пользовательский агент для обнаружения iOS 26+, но это оказалось очень ненадежным-особенно внутри некоторых браузеров в приложении, где пользовательские агенты перезаписаны. < /p>
То, что я ожидал: < /strong> < /p>
, что Env-safe-inset-bottom) будет отражать выключатель My-ableter, и будет отраженное выключение и плат-энтуптор и предотвращает выключатель. перекрывать. < /p>
Что на самом деле происходит: < /p>
• Сначала вставьте отчеты 0. < /p>
• Иногда обновления после прокрутки. Еще:
Проверка высоты экрана через Javascript или любые другие решения JS, чтобы получить правильный смещение.>
Подробнее здесь: https://stackoverflow.com/questions/797 ... a-fixed-bo
