การเปลี่ยนแปลงคู่ใน Chrome 108

“การเปลี่ยนแปลงโอเวอร์โฟลว์บนองค์ประกอบที่ถูกแทนที่ใน CSS”:

จาก Chrome 108 องค์ประกอบที่ถูกแทนที่ต่อไปนี้เป็นไปตามคุณสมบัติโอเวอร์โฟลว์: img, video และ  canvas. ใน Chrome เวอร์ชันก่อนหน้า คุณสมบัตินี้จะถูกละเว้นในองค์ประกอบเหล่านี้

ซึ่งหมายความว่ารูปภาพที่ถูกตัดก่อนหน้านี้ไปยังกล่องเนื้อหาสามารถวาดนอกขอบเขตเหล่านั้นได้หากระบุไว้ในสไตล์ชีต

ดังนั้น องค์ประกอบรูปภาพ วิดีโอ และผ้าใบที่ครั้งหนึ่งเคยถูกตัดออกอาจแสดงโอเวอร์โฟลว์เมื่อ Chrome 108 จัดส่ง สถานการณ์ที่ระบุไว้ซึ่งอาจส่งผลต่องานที่มีอยู่ของคุณ:

• พื้นที่ object-fit คุณสมบัติใช้เพื่อปรับขนาดภาพและเติมช่อง หากอัตราส่วนภาพไม่ตรงกับกล่อง ภาพจะวาดออกนอกขอบเขต
• พื้นที่ border-radius คุณสมบัติทำให้รูปสี่เหลี่ยมจัตุรัสดูเหมือนวงกลม แต่เพราะ overflow จะเห็นได้ว่าการตัดจะไม่เกิดขึ้นอีกต่อไป
• การตั้งค่า inherit: all และทำให้ทรัพย์สินทั้งหมดเป็นมรดกรวมถึง overflow.

ควรค่าแก่การอ่านบทความฉบับเต็มสำหรับตัวอย่างโค้ด แต่วิธีแก้ปัญหาสำหรับโอเวอร์โฟลว์ที่มองเห็นได้ซึ่งไม่ต้องการนั้นกำลังแทนที่ค่าเริ่มต้นของ UA overflow: visible กับ overflow: clip:

img {
  overflow: clip;
}

“เตรียมพร้อมสำหรับการเปลี่ยนแปลงพฤติกรรมการปรับขนาดวิวพอร์ตที่จะเกิดขึ้นกับ Chrome บน Android”:

ในเดือนพฤศจิกายน Chrome 108 ออกวางจำหน่ายแล้ว Chrome จะทำการเปลี่ยนแปลงบางอย่างกับลักษณะการทำงานของ Layout Viewport เมื่อแสดงแป้นพิมพ์บนหน้าจอ (OSK) ด้วยการเปลี่ยนแปลงนี้ Chrome บน Android จะไม่ปรับขนาด Layout Viewport อีกต่อไป แต่จะปรับขนาดเฉพาะ Visual Viewport แทน การดำเนินการนี้จะทำให้ Chrome ทำงานบน Android ได้เทียบเท่ากับ Chrome บน iOS และ Safari บน iOS

นี่คือการเปลี่ยนแปลงที่เกี่ยวข้องกับอาการปวดหัวที่พบบ่อยในการทำงานกับหน่วยวิวพอร์ตและการกำหนดตำแหน่งคงที่บนอุปกรณ์สัมผัสแบบเคลื่อนที่ เราได้กล่าวถึง (และพยายามแก้ไข) ตลอดหลายปีที่ผ่านมา:

การเปลี่ยนแปลงนี้หมายความว่า Chrome บน Android จะไม่ปรับขนาด Layout Viewport อีกต่อไปเมื่อแสดงแป้นพิมพ์บนหน้าจอ ดังนั้น ค่าที่คำนวณของหน่วยวิวพอร์ตจะไม่ลดลงอีกต่อไปเมื่อแป้นพิมพ์ของอุปกรณ์ปรากฏขึ้น เช่นเดียวกันสำหรับองค์ประกอบที่ออกแบบมาให้ใช้วิวพอร์ตแบบเต็มโดยไม่ลดขนาดเพื่อรองรับคีย์บอร์ดอีกต่อไป และจะไม่มีองค์ประกอบตำแหน่งคงที่อีกต่อไป ใครจะรู้เมื่อคีย์บอร์ดปรากฏขึ้น

สิ่งนี้ทำให้พฤติกรรมข้ามเบราว์เซอร์ที่สอดคล้องกันมากขึ้นซึ่งสอดคล้องกับ Chrome, Safari และ Edge บน iOS และ iPadOS เยี่ยมมาก แม้ว่าพฤติกรรมที่อัปเดตจะน้อยกว่าอุดมคติเพราะ UI ของแป้นพิมพ์ยังคงสามารถครอบคลุมและปิดบังองค์ประกอบที่ขวางทางได้

หากคุณต้องการให้องค์ประกอบยังคงปรากฏให้เห็นเมื่อสิ่งนั้นเกิดขึ้น ก็ควรค่าแก่การดู a วิธีแก้ปัญหาที่คริสแชร์มานานแล้ว ที่ใช้คำนำหน้า webkit-fill-available คุณสมบัติ:

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

นั่นใช้พื้นที่ว่างในวิวพอร์ตมากกว่าสิ่งที่ครอบคลุมโดย UI … แต่ปัจจุบัน Chrome ไม่สนใจคุณสมบัตินี้และฉันจะเดิมพันนิกเกิลในกระเป๋าของฉันว่าไม่น่าจะเริ่มเคารพในรุ่น 108 นั่นอาจเป็นจุดที่สงสัยแม้ว่าเป็น Chrome 108 ยังแนะนำ รองรับหน่วยวิวพอร์ตขนาดเล็ก ใหญ่ และไดนามิก ซึ่งได้รับการสนับสนุนใน Safari และ Firefox แล้ว