การเปลี่ยนแปลงที่มีต่อองค์ประกอบที่ถูกแทนที่ใน 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">