क्रोम 108 में एक युगल परिवर्तन आ रहा है

"सीएसएस में बदले गए तत्वों पर अतिप्रवाह में बदलाव":

क्रोम 108 से, निम्नलिखित प्रतिस्थापित तत्व अतिप्रवाह संपत्ति का सम्मान करते हैं: img, video और canvas. क्रोम के पुराने संस्करणों में, इन तत्वों पर इस संपत्ति को नजरअंदाज कर दिया गया था।

इसका मतलब यह है कि एक छवि जिसे पहले इसके सामग्री बॉक्स में क्लिप किया गया था, अब स्टाइल शीट में ऐसा करने के लिए निर्दिष्ट होने पर उन सीमाओं से बाहर खींच सकती है।

इसलिए, छवि, वीडियो और कैनवास तत्व जिन्हें एक बार क्लिप किया गया था, वे क्रोम के 108 जहाजों के दौरान अतिप्रवाह प्रदर्शित कर सकते हैं। विख्यात परिस्थितियाँ जहाँ यह आपके मौजूदा कार्य को प्रभावित कर सकती हैं:

• RSI object-fit संपत्ति का उपयोग छवि को स्केल करने और बॉक्स को भरने के लिए किया जाता है। यदि पक्षानुपात बॉक्स से मेल नहीं खाता है, तो छवि सीमा से बाहर आ जाएगी।
• RSI border-radius गुण एक वर्गाकार छवि को एक वृत्त की तरह बनाता है, लेकिन क्योंकि overflow क्लिपिंग अब दिखाई नहीं देती है।
• की स्थापना inherit: all और सभी संपत्तियों को इनहेरिट करने का कारण बनता है, जिसमें शामिल हैं overflow.

कोड उदाहरणों के लिए पूरा लेख पढ़ने लायक है, लेकिन अवांछित दृश्य अतिप्रवाह का समाधान UA के डिफ़ॉल्ट को ओवरराइड कर रहा है overflow: visible साथ में overflow: clip:

img {
  overflow: clip;
}

"एंड्रॉइड पर क्रोम में आने वाले व्यूपोर्ट के आकार के व्यवहार में बदलाव के लिए तैयार करें":

नवंबर में, क्रोम 108 की रिलीज के साथ, क्रोम ऑन-स्क्रीन कीबोर्ड (ओएसके) दिखाए जाने पर लेआउट व्यूपोर्ट के व्यवहार में कुछ बदलाव करेगा। इस परिवर्तन के साथ, Android पर Chrome अब लेआउट व्यूपोर्ट का आकार नहीं बदलेगा, और इसके बजाय केवल विज़ुअल व्यूपोर्ट का आकार बदलेगा। यह एंड्रॉइड के व्यवहार पर क्रोम को आईओएस पर क्रोम और आईओएस पर सफारी के बराबर लाएगा।

यह व्यूपोर्ट इकाइयों के साथ काम करने और मोबाइल स्पर्श उपकरणों पर निश्चित स्थिति से संबंधित सामान्य सिरदर्द से संबंधित परिवर्तन है। हमने वर्षों से इसे कवर किया है (और हल करने का प्रयास किया है):

परिवर्तन का अर्थ है कि एंड्रॉइड पर क्रोम अब ऑन-स्क्रीन कीबोर्ड दिखाए जाने पर लेआउट व्यूपोर्ट का आकार नहीं बदलेगा। इसलिए, डिवाइस के कीबोर्ड के प्रदर्शित होने पर व्यूपोर्ट इकाइयों के परिकलित मान अब कम नहीं होंगे। वही तत्वों के लिए जाता है जो पूर्ण व्यूपोर्ट लेने के लिए डिज़ाइन किए गए हैं जो अब कीबोर्ड को समायोजित करने के लिए सिकुड़ते नहीं हैं। और अब एक निश्चित-स्थिति तत्व हवा नहीं होगा जो जानता है कि कीबोर्ड कब पॉप अप होता है।

यह अधिक सुसंगत क्रॉस-ब्राउज़र व्यवहार लाता है जो आईओएस और आईपैडओएस पर क्रोम, सफारी और एज के अनुरूप है। यह बहुत अच्छा है, भले ही अपडेट किया गया व्यवहार आदर्श से कम हो क्योंकि कीबोर्ड UI अभी भी उन तत्वों को कवर और अस्पष्ट कर सकता है जो इसके रास्ते में आते हैं।

यदि आप ऐसा होने पर तत्वों को दृश्यमान रहना पसंद करते हैं, तो यह देखने लायक है a समाधान क्रिस ने बहुत पहले साझा किया था जो उपसर्ग का उपयोग करता है webkit-fill-available संपत्ति:

body {
  min-height: 100vh;
  min-height: -webkit-fill-available;
}
html {
  height: -webkit-fill-available;
}

यह यूआई द्वारा कवर किए गए के बजाय व्यूपोर्ट में उपलब्ध स्थान का उपयोग करता है ... लेकिन क्रोम वर्तमान में संपत्ति की उपेक्षा करता है, और मैं अपनी जेब में निकेल को शर्त लगा सकता हूं कि 108 रिलीज में इसका सम्मान करना शुरू करने की संभावना नहीं है। यह एक विवादास्पद मुद्दा हो सकता है, हालांकि, जैसा क्रोम 108 भी पेश करता है छोटी, बड़ी और गतिशील व्यूपोर्ट इकाइयों के लिए समर्थन, जो पहले से ही सफारी और फ़ायरफ़ॉक्स में समर्थित हैं।