I’ve created a webpage that has a view to show my picture, with a blurred overlay on high of the web page content material. On the Mac and different gadgets, this fills the total top of the browser, however on iPhone in iOS 26, it stops simply above the deal with bar. How can I make the blurred background prolong behind the deal with bar to cowl the total display?
Right here is an instance of this the place the blurred background stops simply above the URL bar.
Right here is my present HTML code for the picture viewer:
/* ===== Lightbox ===== */
/* Hidden state */
.lb[hidden] {
show: none !vital;
}
/* Lightbox container */
.lb {
place: mounted;
inset: 0;
z-index: 1300;
show: grid;
grid-template-rows: 1fr auto;
pointer-events: none;
}
.lb.present {
pointer-events: auto;
}
/* --- White blurred overlay (easy cinematic fade) --- */
.lb-backdrop {
place: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.65);
backdrop-filter: blur(14px) saturate(160%);
opacity: 0;
rework: scale(1.02);
transition:
opacity 0.45s cubic-bezier(0.3, 0, 0.2, 1),
rework 0.6s cubic-bezier(0.3, 0, 0.2, 1);
will-change: opacity, rework;
z-index: 1;
}
.lb.present .lb-backdrop {
opacity: 1;
rework: scale(1);
}
/* --- Prime chrome: shut & arrows --- */
.lb-chrome {
place: absolute;
high: 0;
left: 0;
proper: 0;
top: 56px;
show: grid;
grid-template-columns: 1fr auto auto;
align-items: heart;
pointer-events: none;
padding: 8px 10px;
z-index: 3;
opacity: 0;
rework: translateY(-8px);
transition:
opacity 0.3s ease 0.25s,
rework 0.3s ease 0.25s;
}
.lb.present .lb-chrome {
opacity: 1;
rework: translateY(0);
}
/* --- Shut & nav buttons --- */
.lb-close,
.lb-nav {
pointer-events: auto;
background: rgba(255, 255, 255, 0.9);
border: 1px strong rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: var(--shadow);
width: 36px;
top: 36px;
show: flex;
align-items: heart;
justify-content: heart;
coloration: var(--ink);
transition: rework 0.12s ease, background 0.12s ease;
}
.lb-close:hover,
.lb-nav:hover {
rework: translateY(-1px);
background: #fff;
}
.lb-close {
justify-self: begin;
}
.lb-prev {
justify-self: finish;
margin-right: 8px;
}
.lb-next {
justify-self: finish;
}
/* --- Stage & monitor --- */
.lb-stage {
place: relative;
top: 100vh;
show: grid;
place-items: heart;
padding: 56px 0 120px;
box-sizing: border-box;
z-index: 2;
}
.lb-track {
show: flex;
align-items: heart;
top: 100%;
transition:
rework 0.25s ease,
opacity 0.45s ease;
will-change: rework, opacity;
touch-action: pan-y;
opacity: 0;
}
.lb.present .lb-track {
opacity: 1;
}
/* --- Every slide --- */
.lb-slide {
min-width: 100vw;
top: calc(100vh - 176px);
show: grid;
place-items: heart;
padding: 0 20px;
box-sizing: border-box;
}
/* --- Picture reveal animation --- */
.lb-slide img {
max-width: 100%;
max-height: calc(100vh - 200px);
object-fit: comprise;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
-webkit-user-drag: none;
user-select: none;
touch-action: pan-y;
cursor: seize;
opacity: 0;
rework: scale(0.985);
transition:
opacity 0.45s ease 0.12s,
rework 0.45s cubic-bezier(0.3, 0, 0.2, 1) 0.12s;
}
.lb.present .lb-slide img {
opacity: 1;
rework: scale(1);
}
.lb-track.dragging .lb-slide img {
cursor: grabbing;
}
/* --- Caption card --- */
.lb-caption {
place: absolute;
backside: 40px;
left: 50%;
rework: translateX(-50%) translateY(10px);
background: #fff;
border: 1px strong rgba(0, 0, 0, 0.08);
border-radius: 12px;
box-shadow: var(--shadow);
coloration: var(--ink);
font-size: 16px;
font-weight: 600;
max-width: min(88ch, 90vw);
text-align: heart;
padding: 10px 14px;
opacity: 0;
transition:
opacity 0.35s ease 0.25s,
rework 0.35s ease 0.25s;
will-change: opacity, rework;
z-index: 3;
}
.lb.present .lb-caption {
opacity: 1;
rework: translateX(-50%) translateY(0);
}
/* --- Reverse animation tweaks ---
(caption and buttons fade out earlier) */
.lb:not(.present) .lb-caption,
.lb:not(.present) .lb-chrome {
transition-delay: 0s !vital; /* take away the fade-in delay */
transition-duration: 0.25s; /* faster fade-out */
opacity: 0;
/* rework: translateY(-8px); */
}
/* --- Cover physique scroll when open --- */
physique.lb-open {
overflow: hidden;
}
/* --- Buy word underneath caption --- */
.lb-purchase-note {
place: absolute;
left: 50%;
backside: 12px; /* barely beneath the caption */
rework: translateX(-50%) translateY(8px);
show: inline-flex;
hole: 8px;
align-items: heart;
justify-content: heart;
flex-wrap: wrap; /* enable wrapping when slender */
background: rgba(255, 255, 255, 0.96);
border: 1px strong rgba(0, 0, 0, 0.08);
border-radius: 10px;
padding: 6px 12px;
font-size: 0.9rem;
coloration: #111;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08),
0 2px 4px rgba(0, 0, 0, 0.06);
opacity: 0;
transition: opacity 0.28s ease, rework 0.28s ease;
z-index: 4;
/* max-width: 90%; matches content material however not wider than 90% */
text-align: heart; /* retains wrapped textual content centered */
width: max-content;
max-width: 99%;
}
.lb.present .lb-purchase-note {
opacity: 1;
rework: translateX(-50%) translateY(0);
}
.lb-purchase-note a {
font-weight: 600;
text-decoration: none;
coloration: #0a66ff;
white-space: nowrap;
transition: rework 0.25s cubic-bezier(0.25, 0.1, 0.25, 1),
coloration 0.25s ease; /* elective */
transform-origin: heart heart; /* ensures easy scaling from heart */
}
.lb-purchase-note a:hover {
rework: scale(1.02);
/* coloration: #0048d1; elective barely darker blue */
}
/* Stage: go away extra space for caption + buy word */
.lb-stage {
padding: 56px 0 160px; /* was 120px */
}
/* Picture a contact smaller so caption would not overlap footer/contact space */
.lb-slide img {
max-height: calc(100vh - 240px); /* was calc(100vh - 200px) */
}
.lb-caption {
backside: 60px;
}
/* On small screens, tighten a bit extra */
@media (max-width: 600px) {
.lb-stage { padding: 56px 0 170px; }
.lb-slide img { max-height: calc(100vh - 260px); }
}
/* --- Responsive tweak for slender screens --- */
@media (max-width: 380px) {
.lb-purchase-note {
flex-direction: column; /* stack textual content + hyperlink vertically */
hole: 4px;
hole: 0;
padding: 8px 10px;
}
.lb-caption {
backside: 90px;
}
}<div class="lb" id="lightbox" aria-hidden="true" hidden>
<div class="lb-backdrop" id="lbBackdrop"></div>
<div class="lb-chrome">
<button class="lb-close" id="lbClose" aria-label="Shut">
<svg width="20" top="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M6 6l12 12M6 18L18 6" stroke-linecap="spherical"/>
</svg>
</button>
<button class="lb-nav lb-prev" id="lbPrev" aria-label="Earlier">
<svg width="20" top="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M15 6l-6 6 6 6" stroke-linecap="spherical" stroke-linejoin="spherical"/>
</svg>
</button>
<button class="lb-nav lb-next" id="lbNext" aria-label="Subsequent">
<svg width="20" top="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 6l6 6-6 6" stroke-linecap="spherical" stroke-linejoin="spherical"/>
</svg>
</button>
</div>
<div class="lb-stage" id="lbStage" aria-live="well mannered">
<div class="lb-track" id="lbTrack"></div>
</div>
<div class="lb-caption" id="lbCaption" function="word"></div>
<div class="lb-purchase-note" id="lbPurchaseNote" aria-live="well mannered">
<span> on this piece?</span>
<a id="lbPurchaseLink" href="#contact">Contact to buy</a>
</div>
</div>
