כמה שינויים מגיעים ב-Chrome 108

"שינוי להצפה ברכיבים שהוחלפו ב-CSS":

מ-Chrome 108, הרכיבים הבאים שהוחלפו מכבדים את מאפיין הגלישה: img, video ו canvas. בגרסאות קודמות של Chrome, מאפיין זה התעלם ברכיבים אלה.

משמעות הדבר היא שתמונה שהוחתמה קודם לכן לתיבת התוכן שלה יכולה כעת לצייר מחוץ לגבולות אלה אם צוין לעשות זאת בגיליון סגנונות.

לכן, אלמנטים של תמונה, וידאו וקנבס שפעם נגזרו עשויים להציג את הצפת כאשר Chrome 108 יישלח. המצבים המצוינים שבהם זה עשוי להשפיע על העבודה הקיימת שלך:

• השמיים object-fit מאפיין משמש כדי לשנות את קנה המידה של התמונה ולמלא את התיבה. אם יחס הגובה-רוחב אינו תואם לתיבה, התמונה תצויר מחוץ לגבולות.
• השמיים border-radius תכונה גורמת לתמונה מרובעת להיראות כמו עיגול, אלא בגלל overflow נראה שהגזירה כבר לא מתרחשת.
• הגדרת inherit: all וגורם לכל הנכסים לרשת, כולל overflow.

שווה לקרוא את המאמר המלא לדוגמאות קוד, אבל הפתרון לגלישה בלתי רצויה הוא לעקוף את ברירת המחדל של UA overflow: visible עם overflow: clip:

img {
  overflow: clip;
}

"התכונן לשינויי התנהגות לשינוי גודל של נקודת מבט שמגיעים ל-Chrome ב-Android":

בנובמבר, עם שחרורו של Chrome 108, Chrome יבצע כמה שינויים באופן שבו מתנהג Layout Viewport כאשר המקלדת על המסך (OSK) מוצגת. עם השינוי הזה, Chrome ב-Android לא ישנה עוד את גודל ה-Layout Viewport, ובמקום זאת ישנה את גודל ה-Visual Viewport בלבד. זה יביא את ההתנהגות של Chrome ב-Android לזו של Chrome ב-iOS ו-Safari ב-iOS.

זהו שינוי הקשור לכאבי הראש הנפוצים של עבודה עם יחידות תצוגה ומיקום קבוע במכשירי מגע ניידים. כיסינו (וניסינו לפתור) את זה במהלך השנים:

המשמעות של השינוי היא ש-Chrome ב-Android לא ישנה עוד את גודל התצוגה של פריסת כאשר המקלדת על המסך תוצג. לכן, הערכים המחושבים של יחידות נקודת מבט לא יתכווצו עוד כאשר המקלדת של התקן מוצגת. כנ"ל לגבי אלמנטים שנועדו לתפוס את יציאת התצוגה המלאה שלא מתכווצת עוד כדי להכיל את המקלדת. וכבר לא יקפוץ אלמנט במיקום קבוע מי יודע היכן כשהמקלדת קופצת.

זה מביא להתנהגות עקבית יותר בין דפדפנים המותאמת ל-Chrome, Safari ו-Edge ב-iOS ו-iPadOS. זה נהדר, גם אם ההתנהגות המעודכנת פחות אידיאלית מכיוון שממשק המשתמש של המקלדת עדיין יכול לכסות ולטשטש אלמנטים שעומדים בדרכו.

אם אתה מעדיף שאלמנטים יישארו גלויים כשזה קורה, כדאי להסתכל על א פתרון כריס שיתף לפני זמן רב שמשתמש בקידומת webkit-fill-available נכס:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

זה משתמש בשטח הפנוי בנקודת התצוגה ולא במה שמכוסה על ידי ממשק המשתמש... אבל כרום כרגע מתעלם מהנכס, ואני מתערב על הניקל שבכיס שלי שלא סביר שיתחיל לכבד אותו במהדורת 108. עם זאת, זו עשויה להיות נקודה שנויה במחלוקת גם Chrome 108 מציג תמיכה ביחידות תצוגה קטנות, גדולות ודינמיות, שכבר נתמכות ב-Safari ו-Firefox.