שינוי בגלישה ברכיבים שהוחלפו ב-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">