bilal/kolaytercih
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): iPad'de progressive blur kaydırmada ortaya kaymıyor

Browse Source 
Site geneli üst/alt blur katmanları `position: fixed` + `backdrop-filter`
taşıyordu. iOS/iPadOS WebKit (iPad'de Chrome da WebKit) bu birleşimde
bulanıklığı ayrı kompozit katmana alıp scroll sırasında bayat kaydırma
konumuyla çiziyor; katman ekranın ortasında şerit gibi görünüyordu.

Katmanların stili skiper-ui bileşeninin inline stilinden globals.css'teki
`.kt-sayfa-blur`a taşındı (inline stil `@supports` ile ezilemiyordu).
`@supports (-webkit-touch-callout: none)` yalnızca iOS/iPadOS'ta eşleşir —
masaüstü Safari dahil başka hiçbir tarayıcıda desteklenmez — ve orada
bulanıklık + maske düşer, degrade fade korunur. Geometri (112px, z-40,
print:hidden) ve diğer tarayıcılardaki görüntü değişmedi.

Katalogdaki ProgressiveBlur kullanımları `absolute` olduğu için bu hatadan
etkilenmiyor; bileşen onlar için olduğu gibi kaldı.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
bilalgursen
2026-09-22 01:08:01 +03:00
parent bda4d0797b
commit cc46244206
2 changed files with 56 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/app/layout.tsx
View File

@@ -9,7 +9,6 @@ import { ListeCekmecesiLazy } from "@/features/liste/components/liste-cekmecesi-
import { KaydetBannerLazy } from "@/features/liste/components/kaydet-banner-lazy";
import { TercihProfiliKapisiLazy } from "@/features/liste/components/tercih-profili-kapisi-lazy";
import { HeaderGate } from "@/components/header-gate";
import { ProgressiveBlur } from "@/components/ui/skiper-ui/skiper41";
import { DevPanelMount } from "@/components/dev/dev-panel-mount";
import { JsonLd, organizationJsonLd, webSiteJsonLd, SITE_URL } from "@/lib/seo";
import "./globals.css";
@@ -84,23 +83,12 @@ export default function RootLayout({
>
<body className="min-h-dvh flex flex-col bg-slate-50">
<HeaderGate>
{/* Site geneli progressive blur — üst ve alt */}
<div className="pointer-events-none fixed inset-x-0 top-0 z-40 h-28 print:hidden">
<ProgressiveBlur
position="top"
backgroundColor="#f8fafc"
height="112px"
blurAmount="6px"
/>
</div>
<div className="pointer-events-none fixed inset-x-0 bottom-0 z-40 h-28 print:hidden">
<ProgressiveBlur
position="bottom"
backgroundColor="#f8fafc"
height="112px"
blurAmount="6px"
/>
</div>
{/* Site geneli progressive blur — üst ve alt. Stil globals.css'te
(.kt-sayfa-blur): iOS/iPadOS'ta fixed + backdrop-filter katmanı
kaydırmada ekranın ortasına kayıyor, orada bulanıklık @supports
ile düşürülüp degrade fade korunuyor. */}
<div className="kt-sayfa-blur kt-sayfa-blur-ust print:hidden" aria-hidden />
<div className="kt-sayfa-blur kt-sayfa-blur-alt print:hidden" aria-hidden />
<SiteTopBanner />
<SiteHeader />
</HeaderGate>