सीएसएस में बदले गए एलिमेंट पर ओवरफ़्लो में बदलाव

सीएसएस के व्यवहार में बदलाव की बेहतर चेतावनी, जिसकी वजह से अनचाहा ओवरफ़्लो हो सकता है.

Chrome 108 में, बदले गए ये एलिमेंट ओवरफ़्लो प्रॉपर्टी का पालन करते हैं: 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;
}

समस्या का हल

अगर इस बदलाव का मतलब है कि आपको अनचाहा ओवरफ़्लो दिख रहा है और ओवरफ़्लो प्रॉपर्टी को जान-बूझकर दिखाना नहीं है, तो DevTools की मदद से, एलिमेंट पर लागू किए गए सीएसएस की जांच करें. इससे आपको सीएसएस के उस एलान की पहचान करने में मदद मिलेगी जो ओवरफ़्लो प्रॉपर्टी को visible में बदल रहा है. साथ ही, उसे हटाया या clip में अपडेट किया जा सकता है.

img {
    overflow: clip;
}

अगर सीएसएस को अपडेट करना आसान नहीं है, तो एलिमेंट में नीचे दी गई इनलाइन स्टाइल को भी जोड़ा जा सकता है.

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