CSS'te ilginç "position: sticky" davranışı

Merhaba,

Her şey, bu konunun açılmasıyla başladı:


Konuda, Techolay Sosyal'deki navigasyon çubuğunun (navbar) üstünde ince bir boşluk olduğu belirtiliyordu. Bu sorun şu an koyu temada giderilmiş durumda fakat masaüstünde açık temada %25, %75, %125 ve %175 yakınlaştırma düzeylerinde söz konusu boşluğu gözlemleyebilirsiniz. Chrome için örnek ekran görüntülerini aşağıda paylaştım:

• %25:
  
• %75:
  
• %125:
  
• %175:
  

Gördüğünüz üzere bu ince boşluktan navigasyon çubuğunun arkası görülebiliyor. Diğer yakınlaştırma düzeylerinde Chrome'da böyle bir boşluk ortaya çıkmıyor. Birkaç arkadaşımız Edge gibi diğer tarayıcılarda da aynı sorunu gözlemleyebiliyordu.

Öncelikle, bu sorun koyu temada niye yok da sadece açık temada var?

Vavien. dedi:

Header nasıl oluyorsa çaktırmadan iteliyor gibi. .p-header-content elementinin padding'ini değiştirmeyi önerdim.

Genişletmek için tıkla...

Bu öneri üzerine navigasyon çubuğunun hemen üzerindeki, logonun bulunduğu kısmın padding (element içi boşluk) değerleri güncellendi; ancak şu an temalardaki değerler farklı:

• Açık temada padding: 6px 0 (burada ilk değer dikey, ikinci değer yatay padding oluyor):
  
  
• Koyu temada padding: 7px 0:
  

(Chrome DevTools'u, tarayıcıda F12'ye basarak veya sağ tık menüsünde "İncele"ye basarak açabilirsiniz. Sonrasında sayfadaki elementleri ister DevTools'un sol üstündeki "element seçme" aracıyla seçebilir, ister DevTools'ta "Elements" sekmesi altında gözüken HTML dokümanından bulabilirsiniz.)

Yani düşeyde 1 piksellik bir fark var. Zaten boşluk da 1 piksellik bir yüksekliğe sahip gibiydi. Bu fark kapatılmış oldu, değil mi? Maalesef. Örneğin değeri 8px'e çıkarırsanız 6px'tekiyle aynı yakınlaştırma düzeyleri için boşluğun tekrar belireceğini görebilirsiniz. Aşağıda padding: 8px iken %125 düzeyi için bir ekran görüntüsü paylaştım:Yani koyu temada uygulanan çözüm denk gelmiş gibi görünüyor. Hatta şimdi bu yazıyı yazarken "belki teklik/çiftlikten kaynaklanan bir durumdur" diye 1px, 2px, 3px vb. değerler denedim, gerçekten değer tekken boşluk gözükmüyor. Siz de denemek isterseniz DevTools'ta "Styles" kısmında gördüğünüz değere tıklayıp istediğiniz gibi değiştirebilirsiniz.

En yukarıda bağlantısını paylaştığım konuda bu sorun üzerinde bir süre durduk. O konudaki mesajların birkaç tanesini alıntılamak istiyorum:

• brkdnmz dedi:

  Daha hoş bir çözüm buldum: Menünün top özelliğini -1px yapmak. Bu, menünün yukarı doğru 1 piksel kaymasına neden oluyor, yani tekniken 1 piksellik çok ufak bir kısmını göremiyoruz. Belki daha küçük değerler de iş yapabilir. Aşağıdaki ekran görüntüsünde neyi kastettiğimi daha iyi görebilirsiniz (Chrome DevTools'u açıp elementin özelliğini elimle değiştirdim):
  
  Eki Görüntüle 3786
  
  İnternette araştırdığıma göre yakınlaştırma/uzaklaştırma yapılınca türlü piksel hesaplamaları nedeniyle (yuvarlama vb.) bu tür kaymalar olabiliyormuş. Gördüğüm bazı çözümlerde bu tür ufak ayarlar çekilmiş.
  
  Umarım daha hoş bir çözümü vardır, yine çok da hoşuma giden bir yöntem olmadı.

  Genişletmek için tıkla...

  
  İnternetteki araştırmaların sonucu böyle bir çözüm bulmuştum. Navigasyon çubuğu, position: sticky; top: 0; özelliklerinin birlikte kullanımı sayesinde aşağı kaydırırken sayfanın üstüne yapışıyor. Burada top: 0 özelliği, çubukla sayfa arasında boşluk olmamasını sağlıyor; fakat göründüğü üzere boşluk yine de çeşitli durumlarda, farklı yakınlaştırma düzeylerinde oluşabiliyor. Bu değeri -1px'e çekmek çubuğun yukarı doğru 1 piksel yukarı hareket etmesini, yani çubuğun üstten 1 piksellik kısmının sayfanın dışında kalmasını sağlıyor. Bu, padding değerini değiştirmeden bile boşluğun görünmesini engelliyor. Hatta sonra -0.1px değerinin bile yettiğini gördüm. Aslında düşünürseniz bu pek hoş bir değişiklik olmaz, her ne kadar çıplak gözle pek fark edilemese de öngörülemeyen farklı sorunlara yol açabilir. Haliyle, bu çözüm uygun görülmedi.
  
  Aslında logo kısmındaki padding'i değişikliği yerine top: -0.1px değişikliği bana daha uygun geldi çünkü bu değişiklik sadece navigasyon çubuğunu etkiliyor ki etki minimal seviyede. İleride logo kısmının padding'i çeşitli sebeplerden dolayı değiştirilmek istenirse boşluk sorununun tekrar ortaya çıkma ihtimali var.
  
  

• Leo dedi:

  Problemin çözümü basit. .p-header-logo.p-header-logo--image img sınıfındaki vertical-align: bottom; kodu kaldırıldığında, o boşluk da yok oluyor. Tek sıkıntısı, çok ufak bir görsel bozulma oluşturması.
  
  Yine de aşırı fark edilir bulmadım. Merak eden arkadaşlar deneyip, inceleyebilir.
  
  Ufak bir düzenleme, farklı yakınlaştırma aralıklarında bu ufak boşluk yine ortaya çıkıyor. Kökten çözmek için kod yapısını değiştirmek gerekebilir. Mobil cihazlarda böyle bir problem var mı?

  Genişletmek için tıkla...

  
  Burada, logodaki vertical-align: middle özelliği vertical-align: bottom olarak değiştirilince sorunun giderildiği belirtildi; ama sonradan belirtildiği üzere farklı yakınlaştırma düzeyleri için sorun yine yaşanıyordu. Mesela %125'te sorun yokken %150'de oluyordu.
  
  
• Bu sefer alıntı yapmama gerek yok. Benzer bir sorunun sebebi Reddit'teki bir yorumda açıklanmış:
  
  Reddit'te bahsi geçen benzer sorunun kaynağının tarayıcıdaki "sub-pixel rounding" hesaplaması olduğu söylenmiş. Anladığım kadarıyla, basit tabiriyle "yakınlaştırma sonucu oluşan ondalıklı piksel değerlerinin tam sayılara yuvarlanması" ama tam emin değilim.
  
  

• Vavien. dedi:

  Tarayıcı piksel yuvarlar elbet. Ama genel tasarıma bakıldığında burada 1 piksellik kayma yok ki. Hep sıfır. Diğerine yapışık olmalı. Kayacaksa topluca kaymaları gerekmez mi? Navbar'ın yüksekliği 40px olacağına 39px olarak renderlanır, eyvallah. Ama her türlü yukarı yapışık olur.

  Genişletmek için tıkla...

  
  Ben de anlam veremiyordum, bu söylenenler mantıklı gelmişti. İlginçti yani yaşanan sorun.
  
  Bu söylenenler üzerine araştırmalarımda daha da derine inmek istedim çünkü soruna mantıklı bir açıklama bulamamak çok rahatsız etmeye başlamıştı. Odağımı position: sticky özelliğine yönlendirmek istedim.
  
  

• brkdnmz dedi:

  Bunun üzerine biraz daha araştırma ve deney yapayım dedim (%100 ve %125 yakınlaştırma seviyeleriyle deneyin, farklı seviyeler de deneyebilirsiniz):
  

  • İlk deney yüksekleri 102 ve 37 piksel olan alt alta konumlanmış basit birer div ile idi. Yakınlaştırma seviyelerine göre boşluk oluşuyor mu, oluşmuyor mu diye inceledim. Şaşırdığım (aslında istediğim/beklediğim) üzere boşluk oluşmadı.
  • E madem normal div'ler için işler düzgündü, Sosyal'deki durumun nesinin farklı olduğunu düşündüm ve position: sticky'den şüphelendim. İkinci deney, ilk deneyimdeki alttaki div'e position: sticky; top: 0; özelliğini vermekle ilgiliydi ve... olan oldu: Boşluk bu deneyde de belirdi. Her şey oldukça sade ve basit olduğundan dolayı sorun position: sticky ile alakalı olmalıydı. Tabii sayfayı yukarı-aşağı kaydırabilmek için body'ye de height: 2000px vermem gerekti.
  • (Vavien.: XenForo gidip kendi SVG'sini kullanıyor ve kendi sitelerinde böyle dertler yok.) (Alıntıda gözükmüyordu.)
    Öncelikle XenForo'nun sitesinde logo, yapışkan çubuğun içinde. O yüzden onun duruma bir etkisi olmadığını düşündüm.
    (Vavien.: Gerçi orada bile başka PNG konulduğunda yine olmuyor.)
    (Oluyormuş gerçi, yükseklik farkından dolayı olmuş olabilir.)
    Asıl fark yarattığını düşündüğüm durum, yapışkan çubuğun üstündeki div'in yüksekliğinin elle ayarlanmış olmamasıydı, en azından ben başta o yanılgıya düştüm. Sadece yazılardan ve min-height: 48px özelliğinden dolayı oluşmuş bir yüksekliği vardı, direkt height özelliğine dokunulmamış. Ne var ki aslında min-height: 48px elle ayarlanmış bir özellikti. Onu örneğin 50px'e çekince sorunun tekrar oluştuğunu gözlemledim.
    
    Elle ayarlanmadığı yanılgısı sonucu üçüncü deneyi yaptım. Burada üstteki div'de sadece yazı vardı, alttaki yapışkan div'in yüksekliği önceki deneylerdeki gibi elle ayarlandı. Sonuç: Boşluk gözlemleyemedim. Belki burada bile belli şartlar altında boşluk oluşabiliyordur.

  İkinci deney üzerine tüm odağımı position: sticky'ye ve "sticky navbar" konseptine yönelttim.
  
  Bulduklarım:
  

  • Aynı sorunun yaşandığı bir StackOverflow konusu. Çözüm olarak top: -1px önerilmiş ve bu önerinin hoş ve uygun bir çözüm olmadığı yorumu yapılmış.
  • W3Schools'un "Sticky Element" örneği. Burada çoğu yakınlaştırma seviyesinde her şey düzgün görünüyordu, %300 dışında. Burada position: sticky'ye sahip div'in üstünde bir div yerine başka elementler var. Örneği JSFiddle'a taşıyıp yapışkan olanın üstüne div koyunca yine bizim tanıklık ettiğimiz %125 vb. seviyelerde boşluk oluşuyordu.
  • W3Schools'un "Sticky Navbar" örneği. İşte burada ilginç bir şeyler yapılmış. Yapışkanlık özelliği için position: fixed'in yanında biraz JavaScript kullanılmış. Bu durumda boşluk hiç oluşmuyor. Aynı örneği JSFiddle'a taşıdım, sonuç aynı.
  • Aynı sorunun yaşandığı bir StackOverflow konusu daha. Burada verilmiş bir cevapta Chromium'daki bir bug raporu öne sürülmüş. Gördüğüm kadarıyla çözülmemiş. E tabii, sanırım çözülse böyle bir sorunu baştan yaşamazdık.
  • Bootstrap kütüphanesinin kullanıldığı bir örnek. Aynı boşluk sorunu gözlemlenebiliyor.

  Anlaşılan o ki position: sticky; top: 0;, belirli şartlar sağlandığında sorun çıkarmıyor ama normalde tarayıcı kaynaklı hatası var. W3Schools'un kullandığı çözüm ilgimi çekti, her şart için ideal gibi.

  Genişletmek için tıkla...

Paylaştığım son alıntıda, bu sorun üzerine yaptığım birkaç deneyi ve edindiğim bulguları inceleyebilirsiniz.

Uzun lafın kısası, position: sticky; top: 0; bazı durumlarda çok ilginç davranıp sorun çıkarabiliyor. Anladığım kadarıyla tarayıcı kaynaklı bir sorunu var ve bunun üstesinden gelmek için çeşitli çözümler var.

Hâlâ pek açıklığa kavuşturamadığım bir durum. Bu yazı aracılığıyla sizleri de haberdar etmek istedim.

Okuduğunuz için teşekkürler.