שינוי בגלישה ברכיבים שהוחלפו ב-CSS

אזהרה מתקדמת לגבי שינוי בהתנהגות של CSS שעלול לגרום לגלישה לא רצויה.

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

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

img {
  overflow: clip;
  overflow-clip-margin: content-box;
}

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

המאפיין object-fit משמש להתאמת הגודל של התמונה ולמילוי התיבה. אם יחס הגובה-רוחב לא תואם לתיבה, התמונה תשורטט מחוץ לגבולות.

img {
  object-fit: cover;
  overflow: visible;
}

המאפיין border-radius גורם לתמונה מרובעת להיראות כמו עיגול, אבל מכיוון ש-overflow לא גלוי יותר, החיתוך כבר לא מופיע.

img {
  border-radius: 50% 50%;
  overflow: visible;
}

המערכת מגדירה את inherit: all וכתוצאה מכך כל הנכסים עוברים בירושה, כולל overflow.

img {
  all: inherit;
}

פתרון

אם השינוי הזה גורם להצגת גלישה לא רצויה, והחלפה של מאפיין האפשרויות הנוספות למצב גלוי לא מכוונת, צריך לבדוק את ה-CSS שהוחל על הרכיב דרך כלי הפיתוח. כך ניתן לזהות את הצהרת ה-CSS שמבטלת את מאפיין האפשרויות הנוספות ל-visible ולהסיר אותה או לעדכן אותה ל-clip.

img {
    overflow: clip;
}

אם עדכון ה-CSS אינו טריוויאלי, תיקון נוסף הוא הוספת הסגנון המוטבע הבא לרכיב.

<img style="overflow:clip !important">