Arkadaşlar merhaba, uzun süredir uğraştığım bir floating buton animasyonu projem var ve tıklanabilir alan konusunda kafamı duvarlara vuruyorum. Butonun kendisi düzgün çalışıyor, animasyonları da sorunsuz ama tıklama alanı garip bir şekilde davranıyor. Özellikle buton küçülüp büyürken veya konum değiştirirken, kullanıcı parmağını butonun tam üzerine getirse bile bazen tıklama algılanmıyor, bazen de butonun dışındaki bir bölgeye tıklayınca tetikleniyor. CSS'teki transform ve transition kullanıyorum, ama hitbox'ın güncellenmesiyle ilgili bir gecikme olduğunu düşünüyorum.
Bu sorunu çözmek için pointer-events, z-index ve hatta JavaScript ile manuel hitbox tanımlama gibi yöntemler denedim. Ama özellikle butonun boyutu değiştiğinde veya dönerken, tarayıcının hesapladığı tıklanabilir alan eski boyutlara takılı kalıyor gibi. Bazen de butonun altında başka bir eleman varsa, tıklama o elemana gidiyor. Bu durum özellikle mobil cihazlarda çok can sıkıcı, çünkü parmak hassasiyeti zaten düşükken bir de bu tür bir tutarsızlık olunca kullanıcı deneyimi berbat oluyor.
Sizce bu konuda nasıl bir yaklaşım izlemeliyim? Acaba butonun kendisini değil de, sabit boyutlu bir wrapper div kullanıp tıklama olayını oraya bağlamak daha mı mantıklı? Ya da animasyon sırasında pointer-events'i geçici olarak kapatıp, animasyon bitince tekrar açmak gibi bir hack işe yarar mı? Deneyimli arkadaşların fikirlerini çok merak ediyorum. Özellikle performans kaybı yaşamadan bu işi halletmek istiyorum. Bir de bu durum sadece bende mi oluyor, yoksa genel bir sorun mu?
Bu sorunu çözmek için pointer-events, z-index ve hatta JavaScript ile manuel hitbox tanımlama gibi yöntemler denedim. Ama özellikle butonun boyutu değiştiğinde veya dönerken, tarayıcının hesapladığı tıklanabilir alan eski boyutlara takılı kalıyor gibi. Bazen de butonun altında başka bir eleman varsa, tıklama o elemana gidiyor. Bu durum özellikle mobil cihazlarda çok can sıkıcı, çünkü parmak hassasiyeti zaten düşükken bir de bu tür bir tutarsızlık olunca kullanıcı deneyimi berbat oluyor.
Sizce bu konuda nasıl bir yaklaşım izlemeliyim? Acaba butonun kendisini değil de, sabit boyutlu bir wrapper div kullanıp tıklama olayını oraya bağlamak daha mı mantıklı? Ya da animasyon sırasında pointer-events'i geçici olarak kapatıp, animasyon bitince tekrar açmak gibi bir hack işe yarar mı? Deneyimli arkadaşların fikirlerini çok merak ediyorum. Özellikle performans kaybı yaşamadan bu işi halletmek istiyorum. Bir de bu durum sadece bende mi oluyor, yoksa genel bir sorun mu?