background-size: che lỗi trong webkit

Question

Dường như với tôi như có lỗi trong webkit, có thể là vấn đề làm tròn, gây ra thuộc tính background-size để không che toàn bộ phần tử khi được đặt thành cover.

jsFiddle: http://jsfiddle.net/um4cQ/ (thử thay đổi kích thước khu vực kết quả nếu bạn không thấy nền đỏ thể hiện qua trái hoặc trên cùng).

Tôi đã thấy một số tham chiếu đến lỗi xung quanh mạng, some dating back to 2011, nhưng tôi chưa nghe thấy bất kỳ điều gì từ nhà phát triển. Quan trọng hơn trong thời gian này, nếu có một giải pháp CSS (không sử dụng javascript).

Có ai tìm thấy giải pháp khả thi cho việc này không?

Answer 1

Tôi đã thêm tiền tố của nhà cung cấp và cố định một số hình ảnh, sau đó tôi đã nhóm các quy tắc viết tắt background: cho màu sắc và không lặp lại. Điều này cố định một số hình ảnh, nhưng không phải tất cả, vì vậy tôi nhận thấy rằng nó liên quan đến kích thước hình ảnh bạn có, tôi đã sử dụng cùng một hình ảnh (đã hoạt động) cho tất cả các hình ảnh và nó hoạt động.

Vì vậy, tỷ lệ co của hình ảnh của bạn có điều gì đó cần làm ở đây và tôi nghĩ rằng đó là vì background-size: cover; đang cố gắng không bóp méo hình ảnh bằng cách làm rối loạn tỷ lệ khung hình.

Here's my fiddle working ... chỉ cần làm lại hình ảnh của bạn để chúng có tỷ lệ khung hình phù hợp với vùng chứa đúng cách.