Yazı · Mühendislik
Işık neden 11 piksel soldan iniyordu?
Kartlarımız tıklanınca ışığa dönüşüyor, ışık da sayfada gerçek görsele iniyor. İnişteki küçük bir kaymayı nasıl bulduk, testimiz onu neden kaçırdı?
Kısaca
- Işık, gerçek görsele 11 piksel soldan iniyordu. Kısa bir an çift görüntü oluşuyordu.
- Nedeni basitti: çizim alanını kaydırma çubuğu dahil ölçüyorduk.
- Testimiz kutunun yerine bakıyordu, çizilen nesneye değil. Onu da değiştirdik.
Geçiş nasıl çalışıyor
Bir karta tıkladığınızda kart ışık noktalarına ayrılıyor. Noktalar ekranın ortasında nesnenin ışıktan bir kopyasını kuruyor. Sayfa değişiyor, aynı ışık yeni sayfada aynı yerde duruyor, sonra görsel çerçevesine uçup gerçek görüntüye dönüşüyor.
Bu geçişin çalışması için tek bir şart var: ışık, gerçek görselin tam üstüne inmeli. Birkaç piksellik fark bile iki görüntü olarak görünür.
Kayma nasıl fark edildi
Otomatik kontroller geçiyordu. Biz kimiz sayfası 20 testin 20'sinden, Mobil Uygulamalar 23 testin 23'ünden geçti. Yine de geçişte bir şey yanlış görünüyordu.
Kayıtları kare kare ölçtük. Işık, amblemin x ekseninde 140 ile 357 arasına iniyordu. Gerçek görüntü ise 151 ile 368 arasındaydı. Boyut ve yükseklik aynıydı, yani fark saf bir yatay kaymaydı.
Nedeni: kaydırma çubuğu
Geçişin çizim alanı genişliğini pencereden alıyordu. Pencere genişliğine kaydırma çubuğu da dahildir, sayfanın görünen alanına değil. Çizim, olduğundan geniş bir alana göre hesaplanıyor, sonra görünen alana sığdırılıyordu.
const W = window.innerWidth;
const W = host.clientWidth || window.innerWidth;Test neden kaçırdı
Testimiz geçişin kutusunun yerini ölçüyordu ve kutu doğru yerdeydi. Kayan şey kutunun içinde çizilen nesneydi. Bu yüzden testin kendisini de değiştirdik: artık çizilen pikselleri gerçek görselle karşılaştırıyor.
Sonuç
| Sayfa | Kayma önce | Kayma sonra | Parlaklık adımı önce | Sonra |
|---|---|---|---|---|
| Biz kimiz | 11 px | 0 px | 11,5 | 1,2 |
| Mobil Uygulamalar | 11 px | 0 px | 23,4 | 1,8 |
Küçük bir hataydı. Asıl ders şuydu: test, kullanıcının gördüğünü ölçmüyorsa geçmesi pek bir şey söylemez.