בעקבות השינוי הטמענו את אירועי TouchEvents של Chrome, נכון לגרסה M37 (היציבה ב-08/2014), שמשנה את הקואורדינאטות המדווחות למצבים צפים במקום מספרים שלמים.
| לפני | אחרי |
|---|---|
|
clientX: 167 clientY: 196 pageX: 167 pageY: 196 radiusX: 26 radiusY: 26 screenX: 167 screenY: 277 |
clientX: 167.33299255371094 clientY: 195.66700744628906 pageX: 167.33299255371094 pageY: 195.66700744628906 195.66700744628906 |
המשמעות של השינוי הזה היא שאתם מגיבים בצורה חלקה יותר לתנועות של המשתמשים, מאחר שכך אתם יכולים להציב את האצבעות בצורה מדויקת יותר.
באמצעות ההדגמה של ריק ביירס תוכלו לראות איך כל שינוי משמעותי יכול לעשות כשמציירים באיטיות מערבולת.
ההגדרה הזו תשפיע רק על מסכים שדחיסות הפיקסלים שלהם גדולה מ-1. כדי להבין את הסיבה, הבה נבחן דוגמה.
נניח שיש לכם רשת של פיקסלים של CSS בגודל 3x3 ודחיסות המסך היא 3. כלומר, יש רשת של פיקסלים פיזיים בגודל 9x9 ואת תנועות המשתמש מהפינה השמאלית העליונה לפינה הימנית התחתונה.
במקור, עיגולנו את מיקום המגע לפיקסל הקרוב ביותר של ה-CSS, ומשמעות הדבר שבתנועה הזו תתקבל השלבים הבאים.
אנחנו מפספסים את שלבי הביניים שעשויים להופיע הפיקסלים הפיזיים בזמן שהמשתמש מזיז את האצבע.
עכשיו, אחרי שעברנו למצב צף, התנועה שלנו יכולה להיראות כך.
ברוב המקרים לא נדרשים שינויים בקוד, אבל המשמעות היא שהאנימציות או התנועות שתבצעו באמצעות TouchEvents יהיו חלקים יותר, במיוחד עבור תנועות איטיות.
אנחנו מתכננים גם להוסיף את השיפור הזה גם ל-Safari לנייד: https://bugs.webkit.org/show_bug.cgi?id=133180.