Cảnh báo nâng cao về thay đổi đối với hành vi của CSS có thể gây ra tình trạng tràn không mong muốn.
Từ Chrome 108, các phần tử được thay thế sau đây sẽ tuân theo thuộc tính mục bổ sung: img, video và canvas. Trong các phiên bản Chrome cũ, thuộc tính này đã bị bỏ qua trên các phần tử đó.
Điều này có nghĩa là hình ảnh trước đó được cắt vào hộp nội dung giờ đây có thể vẽ bên ngoài các giới hạn đó nếu được chỉ định để thực hiện việc này trong biểu định kiểu. Biểu định kiểu của trình duyệt mặc định cắt phần tràn vào hộp nội dung theo các quy tắc sau:
img {
overflow: clip;
overflow-clip-margin: content-box;
}
Tuy nhiên, biểu định kiểu của bạn có thể ghi đè hành vi này bằng cách đặt overflow: visible. Các ví dụ sau đây minh hoạ một số trường hợp mà giờ đây bạn có thể thấy tràn thông tin không mong muốn.
Thuộc tính object-fit được dùng để điều chỉnh tỷ lệ hình ảnh và lấp đầy hộp. Nếu tỷ lệ khung hình không khớp với ô, hình ảnh sẽ vẽ bên ngoài đường viền.
img {
object-fit: cover;
overflow: visible;
}
Thuộc tính border-radius làm cho ảnh hình vuông trông giống như một hình tròn, nhưng vì overflow có thể nhìn thấy được nên việc cắt không còn xảy ra nữa.
img {
border-radius: 50% 50%;
overflow: visible;
}
Đặt inherit: all và khiến tất cả thuộc tính được kế thừa, bao gồm cả overflow.
img {
all: inherit;
}
Giải pháp
Nếu thay đổi này có nghĩa là bạn không cố ý thấy mục bổ sung không mong muốn và việc ghi đè thuộc tính mục bổ sung thành "hiển thị" là không cố ý, hãy kiểm tra CSS được áp dụng cho phần tử thông qua Công cụ cho nhà phát triển. Việc này sẽ cho phép bạn xác định nội dung khai báo CSS đang ghi đè thuộc tính mục bổ sung vào visible, đồng thời xoá hoặc cập nhật thuộc tính đó thành clip.
img {
overflow: clip;
}
Nếu việc cập nhật CSS không hề đơn giản, một cách khắc phục khác là thêm kiểu cùng dòng sau đây vào phần tử.
<img style="overflow:clip !important">