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

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

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">