אזהרה מתקדמת לגבי שינוי בהתנהגות של 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">