Beberapa Perubahan Datang di Chrome 108

“Perubahan overflow pada elemen yang diganti di CSS”:

Dari Chrome 108, elemen yang diganti berikut mengikuti properti overflow: img, video dan canvas. Di Chrome versi sebelumnya, properti ini diabaikan pada elemen ini.

Ini berarti bahwa gambar yang sebelumnya terpotong ke kotak kontennya sekarang dapat menggambar di luar batas tersebut jika ditentukan untuk melakukannya dalam lembar gaya.

Jadi, elemen gambar, video, dan kanvas yang pernah dipotong mungkin menampilkan luapan saat Chrome 108 dikirimkan. Situasi yang dicatat di mana hal ini dapat memengaruhi pekerjaan Anda yang ada:

• Grafik object-fit properti digunakan untuk menskalakan gambar dan mengisi kotak. Jika rasio aspek tidak sesuai dengan kotak, gambar akan tergambar di luar batas.
• Grafik border-radius properti membuat gambar persegi terlihat seperti lingkaran, tetapi karena overflow terlihat kliping tidak lagi terjadi.
• Pengaturan inherit: all dan menyebabkan semua properti mewarisi, termasuk overflow.

Layak membaca artikel lengkap untuk contoh kode, tetapi solusi untuk overflow yang terlihat tidak diinginkan adalah mengesampingkan default UA overflow: visible dengan overflow: clip:

img {
  overflow: clip;
}

“Bersiaplah untuk perubahan perilaku pengubahan ukuran area pandang yang akan datang ke Chrome di Android”:

Pada bulan November, dengan dirilisnya Chrome 108, Chrome akan membuat beberapa perubahan pada perilaku Layout Viewport saat keyboard di layar (OSK) ditampilkan. Dengan perubahan ini, Chrome di Android tidak akan lagi mengubah ukuran Layout Viewport, dan hanya mengubah ukuran Visual Viewport. Ini akan membuat perilaku Chrome di Android setara dengan Chrome di iOS dan Safari di iOS.

Ini adalah perubahan yang terkait dengan sakit kepala umum bekerja dengan unit viewport dan pemosisian tetap pada perangkat sentuh seluler. Kami telah membahas (dan mencoba menyelesaikannya) selama bertahun-tahun:

Perubahan berarti bahwa Chrome di Android tidak akan lagi mengubah ukuran Layout Viewport saat keyboard di layar ditampilkan. Jadi, nilai unit viewport yang dihitung tidak akan menyusut lagi saat keyboard perangkat ditampilkan. Hal yang sama berlaku untuk elemen yang dirancang untuk mengambil area pandang penuh tidak lagi menyusut untuk mengakomodasi keyboard. Dan tidak akan ada lagi elemen posisi tetap yang muncul entah di mana saat keyboard muncul.

Ini menghadirkan perilaku lintas-browser yang lebih konsisten yang sejalan dengan Chrome, Safari, dan Edge di iOS dan iPadOS. Itu bagus, meskipun perilaku yang diperbarui kurang ideal karena UI keyboard masih dapat menutupi dan mengaburkan elemen yang menghalanginya.

Jika Anda lebih suka elemen tetap terlihat saat itu terjadi, ada baiknya melihat a solusi yang dibagikan Chris beberapa waktu lalu yang menggunakan awalan webkit-fill-available milik:

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

Itu menggunakan ruang yang tersedia di viewport daripada apa yang dicakup oleh UI ... tetapi Chrome saat ini mengabaikan properti, dan saya berani bertaruh nikel di saku saya bahwa itu tidak mungkin untuk mulai menghormatinya dalam rilis 108. Itu mungkin poin yang bisa diperdebatkan, karena Chrome 108 juga memperkenalkan dukungan untuk unit viewport kecil, besar, dan dinamis, yang sudah didukung di Safari dan Firefox.