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