בנובמבר, בעקבות השקת Chrome 108, יתבצע ב-Chrome מספר שינויים באופן הפעולה של Layout Viewport כאשר מוצגת המקלדת שמופיעה במסך (OSK). בעקבות השינוי, Chrome ב-Android לא ישנה יותר את הגודל של אזור התצוגה של הפריסה, וישנה את הגודל רק של אזור התצוגה החזותי. ההתנהגות של Chrome ב-Android תהיה דומה להתנהגות של Chrome ב-iOS ו-Safari ב-iOS.
ריכזנו כאן כמה רקעים על מה שקורה, על הסיבה לשינוי הזה ב-Chrome ועל הפעולות שאפשר לבצע כדי להתכונן אליו.
נקודת המבט של Layout ואזור התצוגה החזותית
כשמבקרים באתר מסוים, אי אפשר לראות את כל התוכן של הדף אחרי שהוא נטען. במקום זאת, הדפדפן מציע לך אזור תצוגה שדרכו תוכל לראות חלק מהדף. אזור התצוגה הזה נקרא גם אזור התצוגה של הפריסה. כשתוכן הדף גדול מדי, הדפדפן מציע מנגנון גלילה.
כשמציבים אלמנטים באמצעות position: fixed, הם ימוקמו מול אותו נקודת מבט של הפריסה. כיוון שאזור התצוגה של הפריסה נשאר כפי שהוא כשגוללים למטה בדף, כך יופיעו גם רכיבים שמשתמשים ב-position: fixed.
position: fixed (תיבות כחולות). המוצגים הם (משמאל לימין) Safari ב-iPhone, Chrome ב-Android ו-Firefox ב-Android.
בנוסף לאזור התצוגה של הפריסה, הדפדפן כולל גם אזור תצוגה חזותי. הוא מייצג את החלק של אזור התצוגה שמופיע כרגע. ברמת זום 1, אזור התצוגה החזותי הזה גדול כמו אזור התצוגה של הפריסה.
כשמבצעים התקרבות בתנועת צביטה, ניתן לכווץ את אזור התצוגה החזותית ביחס לאזור התצוגה של הפריסה.
התנהגות הגודל של אזור התצוגה
כשמתמקדים בקלט או בכל אזור אחר שניתן לעריכה, במכשירים – בעיקר במכשירים עם מסך מגע – תופיע מקלדת על המסך. המקלדת הזו, שמכונה לעיתים קרובות מקלדת וירטואלית,מאפשרת למשתמשים להזין תוכן באזור שניתן לעריכה.
במצב כזה, הדפדפנים מגיבים באחת מהדרכים הבאות ביחס לאזורי התצוגה השונים:
- שינוי הגודל של אזור התצוגה החזותי בלבד וקיזוז של אזור התצוגה של הפריסה.
- משנים את הגודל של אזור התצוגה החזותית וגם של אזור התצוגה של הפריסה.
- אין לשנות את הגודל של Layout Viewport או Visual Viewport, כך שהמקלדת הווירטואלית תופיע מעל שניהם.
שלושת ההתנהגויות האלה מוצגות באופן הבא:
בהתאם לשילוב של הדפדפן ומערכת ההפעלה שהמבקר משתמש בו, אחת מההתנהגויות נמצאת בשימוש, מעבר לשליטתכם.
מיפוי ההתנהגויות השונות של שינוי גודל
במסגרת המאמץ לחקירת אזור התצוגה, שהוא חלק מ-Interop 2022, חקרנו היבטים שונים הקשורים לאזור התצוגה, עבור כל שילוב מרכזי של דפדפנים ומערכת הפעלה.
אחד ההיבטים הנבדקים הוא התנהגות שינוי הגודל כאשר מוצג ה-OSK. זה הוביל לסיווג הבא:
קבוצה ראשונה
דפדפנים שמשנים את הגודל של Visual Viewport (אזור התצוגה החזותית), כך שלא יהיו שינויים ב-Layout Viewport.
- Safari ב-iOS
- Safari ב-iPadOS
- Chrome ב-ChromeOS
- Chrome ב-iOS
- Chrome ב-iPadOS
- Edge ב-iOS
- Edge ב-iPadOS
קבוצה שנייה
דפדפנים שמשנים את הגודל של אזור התצוגה החזותית וגם של אזור התצוגה של הפריסה.
- Chrome ב-Android
- Firefox ב-Android
- Edge ב-Android
- Firefox ב-iOS
קבוצה שלישית
דפדפנים שלא משנים את הגודל של אף אחד מאזורי התצוגה:
- כברירת מחדל – ב-Chrome ב-Android אפשר להביע הסכמה להתנהגות זו באמצעות VirtualKeyboard API
תופעות לוואי של כל התנהגות
ההבדל הזה באופן שבו משתנה הגודל של אזורי תצוגה שונים כשמוצג ה-OSK מוביל לפריסה של אתרים ולהתנהגות שינוי הגודל שלהם שלא ניתנת ליכולת פעולה הדדית.
בדפדפנים מקבוצה 1, שבהם מוצג ה-OSK:
- הערכים המחושבים עבור יחידות יחסיות-לאזור התצוגה נשארים ללא שינוי.
- רכיבים שנועדו לתפוס את כל המרחב החזותי נשארים בגודלם.
- רכיבים שנעשה בהם שימוש ב-
position: fixedנשארים במקומם, ואפשר להסתיר אותם על ידי OSK.
בדפדפנים מקבוצה 2, שבהם מוצג ה-OSK:
- הערכים המחושבים של יחידות יחסיות של אזור התצוגה מתכווצים.
- רכיבים שנועדו לתפוס את כל השטח החזותי של האלמנטים מתכווצים.
- רכיבים שנעשה בהם שימוש ב-
position: fixedיכולים להגיע למקום אחר בפריסה.
position: fixed (תיבות כחולות). המוצגים הם Safari ב-iOS (בצד שמאל) ו-Chrome ב-Android (במרכז ובצד ימין).
לא תוכלו לדעת באיזו התנהגות נעשה שימוש, אלא אם תשתמשו בריצוף של סוכן המשתמש או תסתמכו על סקריפטים נרחבים. כמו כן, לא ניתן לשנות את אופן הפעולה, מכיוון שהוא נקבע על ידי שילוב הדפדפן ומערכת ההפעלה שבהם המשתמש מבקר.
שינוי התנהגות ברירת המחדל בגרסה 108 של Chrome
החל מגרסה 108 של Chrome, Chrome ב-Android ישנה את התנהגות הגודל של אזור התצוגה כך שלא ישנה יותר את הגודל של אזור התצוגה של הפריסה כשהמקלדת שמופיעה במסך.
הבחירה הזו תיצור התאמה להתנהגות ב-Chrome ב-Android לזו של Chrome ב-iOS, ב-iPadOS, ב-Windows וב-CrOS, ב-Safari ב-iOS וב-iPadOS וב-Edge ב-iOS, ב-iPadOS וב-Windows.
הודות לשינוי הזה, מחברים יכולים לדעת באיזו התנהגות ייעשה שימוש, ללא קשר למערכת ההפעלה של Chrome שבה פועלת מערכת ההפעלה. בנוסף, הוא מאפשר יחידות יציבות ביחס לאזור התצוגה: הצגה או הסתרה של ה-OSK לא משפיעה על היחידות האלה.
הבעת הסכמה להתנהגות אחרת
אם אתם רוצים שהאתר שלכם ישתמש בהתנהגות של שינוי הגודל לפני 108, אל דאגה. גם המשלוח בגרסה 108 של Chrome הוא תוסף למטא תג של אזור התצוגה.
באמצעות המקש interactive-widget אפשר להורות ל-Chrome איזו התנהגות שינוי רוצים לשנות.
הערכים הקבילים עבור interactive-widget הם:
resizes-visual: שינוי הגודל של אזור התצוגה החזותי בלבד, ולא של אזור התצוגה של הפריסה.resizes-content: שינוי הגודל של אזור התצוגה החזותית וגם של אזור התצוגה של הפריסה.overlays-content: אין לשנות את הגודל של אזור התצוגה.
כדי להצטרף שוב להתנהגות "הישנה" של Chrome ב-Android, יש להגדיר את המטא תג של אזור התצוגה כך:
<meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
אם לא תכללו את interactive-widget במטא תג של אזור התצוגה, Chrome ישתמש בהתנהגות ברירת המחדל, שהיא resizes-visual.
חזותית, להגדרות יש את ההשפעה הבאה על אזורי התצוגה השונים:
resizes-visual, resizes-content ו-overlays-content.
אפשר לבדוק את ההשפעה של כל ערך בדפדפן באתר ההדגמה הזה.
בדיקה ומשוב
אנחנו צופים שיהיו הבדלים קלים באתרים קיימים, אבל אנחנו צופים שלא ייחסמו, כי Chrome 108 ב-Android יפעל עכשיו כמו ב-Safari ב-iOS. לכן, אתרים שפועלים באופן תקין ב-Safari ב-iOS אמורים לפעול באופן תקין גם ב-Chrome בגרסה 108 ב-Android.
עם זאת, אנחנו ממליצים למחברי אתרים לבדוק באופן פעיל את האתרים שלהם בגרסה 108 של Chrome, שנמצאת בגרסת בטא החל מ-27 באוקטובר 2022. כדאי לחפש באופן ספציפי רכיבים שמשתמשים ב-position: fixed ו/או מסתמכים על יחידות יחסיות לאזור תצוגה.
אפשר לדווח על המשוב בכתובת crbug.com. חשוב לכלול את המילה 'מקלדת שמופיעה במסך' בכותרת הדוח.