Thank you for supporting me.
My environment
Device: iPhone 15 Pro OS: iOS 26.0 Public Beta (23A5336a)
In iOS 26, three types of tabs were added to Safari. Depending on the option, the behavior of the fixed header and footer can be unstable. *Tab settings can be changed in the iOS Settings app under "Apps -> Safari" > "Tabs."
The following behavior differs depending on the tab.
- Compact
When scrolling down, the header and footer shift up by a few pixels. A margin is created between the footer and the URL input field.
- Bottom
Behaves the same as "Compact."
- Top
The header is completely hidden below the URL input field at the top of the screen, leaving a margin below the footer.
Below is the sample code to check the operation.
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>固定ヘッダー/フッター + モーダル</title>
<style>
:root {
--header-h: 56px;
--footer-h: 56px;
}
body {
margin: 0;
font-family: sans-serif;
line-height: 1.6;
background: #f9fafb;
padding-top: var(--header-h);
padding-bottom: var(--footer-h);
}
header .inner, footer .inner {
width: 100%;
max-width: var(--max-content-w);
padding: 0 16px;
display: flex;
align-items: center;
justify-content: space-between;
}
header, footer {
position: fixed;
left: 0; right: 0;
display: flex; align-items: center; justify-content: center;
z-index: 100;
background: #fff;
}
header {
top: 0;
height: var(--header-h);
border-bottom: 1px solid #ddd;
}
footer {
bottom: 0;
height: var(--footer-h);
border-top: 1px solid #ddd;
}
main {
padding: 16px;
}
.btn {
padding: 8px 16px;
border: 1px solid #2563eb;
background: #2563eb;
color: #fff;
border-radius: 6px;
cursor: pointer;
}
/* モーダル関連 */
.modal {
position: fixed;
inset: 0;
display: none;
z-index: 1000;
}
.modal.is-open { display: block; }
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.5);
}
.modal__panel {
position: relative;
max-width: 600px;
margin: 10% auto;
background: #fff;
border-radius: 8px;
padding: 20px;
z-index: 1;
}
.modal__head {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 12px;
}
.modal__title { margin: 0; font-size: 18px; font-weight: bold; }
.modal__close {
background: none;
border: none;
font-size: 20px;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<div class="inner">
<h1>デモページ</h1>
<button id="openModal" class="btn">モーダルを開く</button>
</div>
</header>
<main class="container" id="main">
<h2>スクロール用の適当なコンテンツ1</h2>
<p>ヘッダーとフッターは常に表示されます。モーダルボタンを押すと、画面いっぱいのダイアログが開きます。</p>
<!-- ダミーカードを複数 -->
<section class="grid">
<div class="card"><strong>カード1</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード2</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード3</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード4</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード5</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード6</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード7</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード8</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード9</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
<div class="card"><strong>カード10</strong><p>適当なテキスト。適当なテキスト。適当なテキスト。</p></div>
</section>
</main>
<footer>
<small>© 2025 Demo</small>
</footer>
<!-- モーダル -->
<div class="modal" id="modal">
<div class="modal__backdrop"></div>
<div class="modal__panel">
<div class="modal__head">
<h2 class="modal__title">モーダル</h2>
<button class="modal__close" id="closeModal">×</button>
</div>
<p>これは白いビューのモーダルです。背景は黒く半透明で覆われています。</p>
</div>
</div>
<script>
const modal = document.getElementById('modal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');
const backdrop = modal.querySelector('.modal__backdrop');
openBtn.addEventListener('click', () => {
modal.classList.add('is-open');
});
function closeModal() {
modal.classList.remove('is-open');
}
closeBtn.addEventListener('click', closeModal);
backdrop.addEventListener('click', closeModal);
window.addEventListener('keydown', (e) => {
if (e.key === 'Escape' && modal.classList.contains('is-open')) {
closeModal();
}
});
</script>
</body>
</html>