การเปลี่ยนแปลงที่มีต่อองค์ประกอบที่ถูกแทนที่ใน CSS

คำเตือนขั้นสูงเกี่ยวกับการเปลี่ยนแปลงลักษณะการทำงานของ 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">