Merhaba,
Her şey, bu konunun açılmasıyla başladı:
techolay.net
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:
Öncelikle, bu sorun koyu temada niye yok da sadece açık temada var?
Bu öneri üzerine navigasyon çubuğunun hemen üzerindeki, logonun bulunduğu kısmın
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
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
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:
Paylaştığım son alıntıda, bu sorun üzerine yaptığım birkaç deneyi ve edindiğim bulguları inceleyebilirsiniz.
Uzun lafın kısası,
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.
Her şey, bu konunun açılmasıyla başladı:
Techolay'da fark ettiğim hata
Merhaba, az önce normal bir şekilde konulara bakarken Ana sayfa ve Sosyal yazan kısmın hatalı olduğunu fark ettiim. Sorun ise: Sayfayı aşağıya indirdiğimizde bahsettiğim kısmın üstünde piksel bir şekilde üsteki tarafı görüyoruz ve bu da sinir bozucu bir durum oluyor. Bu bir hata mı yoksa bilerek...
techolay.net
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:
Öncelikle, bu sorun koyu temada niye yok da sadece açık temada var?
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 yataypaddingoluyor):
- Koyu temada
padding: 7px 0:
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:
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:
-
İ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. Buradatop: 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,paddingdeğerini değiştirmeden bile boşluğun görünmesini engelliyor. Hatta sonra-0.1pxdeğ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ındakipadding'i değişikliği yerinetop: -0.1pxdeğ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ınpadding'i çeşitli sebeplerden dolayı değiştirilmek istenirse boşluk sorununun tekrar ortaya çıkma ihtimali var.
-
Burada, logodakivertical-align: middleözelliğivertical-align: bottomolarak 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.
-
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.
-
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.
