คำเตือนขั้นสูงเกี่ยวกับการเปลี่ยนแปลงลักษณะการทำงานของ CSS ที่อาจทำให้เกิดส่วนเกินที่ไม่พึงประสงค์
จาก 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;
}
โซลูชัน
หากการเปลี่ยนแปลงนี้ทำให้คุณเห็นรายการเพิ่มเติมที่ไม่ต้องการและการลบล้างพร็อพเพอร์ตี้รายการเพิ่มเติมให้มองเห็นได้เกิดขึ้นโดยเจตนา ให้ตรวจสอบ CSS ที่ใช้กับองค์ประกอบผ่านเครื่องมือสำหรับนักพัฒนาเว็บ การดำเนินการนี้จะช่วยให้คุณระบุการประกาศ CSS ที่ลบล้างพร็อพเพอร์ตี้รายการเพิ่มเติมเป็น visible
และนำออกหรืออัปเดตเป็น clip
ได้
img {
overflow: clip;
}
หากการอัปเดต CSS นั้นไม่ใช่เรื่องสำคัญ วิธีแก้ไขอีกอย่างคือการเพิ่มรูปแบบแทรกในบรรทัดต่อไปนี้ลงในองค์ประกอบ
<img style="overflow:clip !important">