iOS Safari’de Site Arka Planını Çentiğin Altına Uzatan CSS Hilesi

iOS Safari, durum çubuğunun (çentik veya Dynamic Island) ve alt sekme çubuğunun arkasındaki alanı sitenizin body arka plan rengiyle otomatik olarak doldurur. Bu boşluklar varsayılan olarak beyaz veya boş görünür çünkü çoğu site body üzerine açıkça bir arka plan rengi tanımlamaz — tek satırlık bir CSS kuralı çoğu durumda yeterli.

Sorun ne?

iOS Safari’de bir web sitesi açtığınızda tarayıcı arayüzü, sayfa içeriğinin üstüne (durum çubuğu/çentik bölgesi) ve altına (sekme/gezinme çubuğu) taşar. Bu bölgeler sitenin kendi arka planıyla değil tarayıcının varsayılan rengiyle dolar — ve body özel bir renk tanımlamıyorsa bu genelde beyaz bir şerit olarak göze batar, özellikle koyu temalı sitelerde.

UX Collective’de Adir SL’in Ağustos 2026’da yayınladığı yazıya göre çözüm şaşırtıcı derecede basit: Safari, bu üst ve alt boşlukları sayfanın body arka plan rengiyle doldurma davranışına sahip. Yazar bu davranışı macOS 26 ve iOS 26’da Safari üzerinde test etmiş.

En basit çözüm: tek satır CSS

body {
  background-color: lightblue;
}

Bu tek kural, üst ve alt boşluğu da aynı renkle dolduruyor. Sitenizde zaten body üzerinde bir arka plan rengi tanımlıysa (örn. koyu temalı bir site) muhtemelen bu davranışı fark etmeden zaten alıyorsunuzdur — sorun genelde body rengi tanımsız bırakılıp arka planın yalnızca iç kapsayıcı elemanlara verildiği sitelerde ortaya çıkıyor.

Farklı renkli üst/alt bar için gelişmiş yöntem

Tek renk body arka planı üst ve alt boşluğu aynı renkte doldurur. Header’ınız koyu, footer’ınız açık renkliyse bu işe yaramaz. Yazının önerdiği gelişmiş teknik, position: fixed ile konumlandırılmış ayrı .top ve .bottom elemanları kullanmak:

• .top elemanı sayfanın en üstüne sabitlenir ve header renginizle eşleşir.
• .bottom elemanı sayfanın en altına sabitlenir ve footer renginizle eşleşir.

Yazar, bu ileri tekniğin çoğu site için gereğinden karmaşık olabileceğini belirtiyor ve “gerçekçi orta yol” olarak yalnızca .top elemanını kullanmayı, alt kısmı ise body arka planına bırakmayı öneriyor.

viewport-fit=cover ve env(safe-area-inset-*) ne zaman gerekli?

Bu body-renk hilesi arka planı doldurmak için yeterli, ama çentik/Dynamic Island bölgesine içerik (metin, buton, logo) yerleştirmeniz gerekiyorsa farklı bir teknik devreye giriyor. WebKit’in kendi mühendislik blogunda iPhone X tasarımı için belgelediği yöntem:

1. Viewport meta etiketine viewport-fit=cover ekleyin: <meta name="viewport" content="initial-scale=1, viewport-fit=cover">. Bu, sayfanın güvenli alan sınırlarını göz ardı edip ekranın tamamına yayılmasını sağlar.
2. viewport-fit=cover eklendikten sonra içeriğin çentiğin arkasında kalmaması sizin sorumluluğunuzdadır — env(safe-area-inset-top), env(safe-area-inset-bottom), env(safe-area-inset-left), env(safe-area-inset-right) CSS ortam değişkenleriyle padding/margin ayarlayın.
3. Alt gezinme çubuğu için özellikle: padding-bottom: env(safe-area-inset-bottom); home indicator’ın içeriğinizin üzerine binmesini engeller.

Bu ikinci teknik farklı bir problemi çözüyor — arka planı boyamak değil, güvenli alanın içine gerçek içerik yerleştirmek. Sadece arka plan rengini uzatmak istiyorsanız viewport-fit=cover gerekmez; body arka plan rengi tek başına yeterlidir.

Bu hile ne zaman bozulur

Yazar açıkça uyarıyor: “Buradaki her hack gelecek sürümlerde daha az etkili olabilir ya da tamamen çalışmayabilir, zaman gösterecek.” Bu, Apple’ın her yıl Safari’nin render motorunu ve güvenli alan davranışını güncellediği göz önüne alınırsa ciddiye alınması gereken bir uyarı — tekniği canlıya almadan önce hedef kitlenizin kullandığı güncel iOS sürümünde test edin.

Kendi sitenizde nasıl test edersiniz

• Gerçek bir iPhone’da (simülatör değil) Safari’de siteyi açın, ekranı döndürüp yatay modda da kontrol edin.
• body üzerinde açık bir background-color tanımlı olduğundan emin olun — miras alınan renk her zaman güvenilir davranmayabilir.
• Header/footer renkleriniz farklıysa .top/.bottom sabit elemanlarını deneyin.
• Çentik bölgesine gerçek içerik (logo, buton) koyacaksanız viewport-fit=cover + env(safe-area-inset-*) kombinasyonuna geçin.

Frontend tarafında başka taze bir konu için CSS’e Gap Decorations Geldi yazımıza göz atabilirsiniz.

Sık sorulan sorular

iOS Safari’de body arka plan rengi neden çentiğin arkasına kadar uzanıyor?

Safari, sayfanın üst ve alt kenarındaki tarayıcı arayüzü şeritlerini sayfanın body arka plan rengiyle otomatik dolduruyor; bu davranış herhangi bir ekstra meta etiket veya CSS özelliği gerektirmiyor, yalnızca body üzerinde açık bir background-color tanımlı olması yeterli.

viewport-fit=cover kullanmak zorunda mıyım?

Hayır — yalnızca arka plan rengini çentik/home indicator bölgesine uzatmak istiyorsanız body { background-color: ... } tek başına yeterli. viewport-fit=cover‘ı yalnızca o bölgeye gerçek içerik (metin, ikon, buton) yerleştirmeniz gerektiğinde, env(safe-area-inset-*) ile birlikte kullanmanız gerekir.

Bu teknik Android Chrome’da da çalışır mı?

Kaynak yazı yalnızca macOS 26 ve iOS 26’da Safari üzerinde test edilmiş; Android Chrome’un durum çubuğu/gezinme çubuğu davranışı farklı bir render modeline dayanıyor ve bu makalede doğrulanmamıştır — Android için ayrıca test edilmeden varsayım yapılmamalı.

Header ve footer’ım farklı renkteyse ne yapmalıyım?

Tek bir body arka plan rengi her iki boşluğu da aynı renkte dolduracağından, position: fixed ile konumlandırılmış ayrı .top (ve gerekiyorsa .bottom) elemanları kullanarak her boşluğa bitişik olduğu bölümün rengini verebilirsiniz.

---

Kaynak: UX Collective, “The CSS Hack That Extends Your Website on iOS Safari” — Adir SL, Ağustos 2026. Destekleyici teknik kaynak: WebKit Blog, “Designing Websites for iPhone X”