Đây là hình ảnh của ảnh xem thử cốc:Safari với render inline-khối thu nhỏ lại bởi scaleX
Preview hiển thị những gì div khác chứa, nhưng thu nhỏ lại bằng 0,2. Để mô phỏng đường cong bề mặt của cốc, tôi đã sử dụng một kỹ thuật trong đó các khối xem trước có chiều rộng = chiều rộng ban đầu * 0,2 và chúng được thu nhỏ bằng cách chuyển đổi scaleX, 0,6, 0,8, 1, 0,8. 0,6.
Nó hoạt động tốt (Tôi không thể sử dụng html5 canvas vì tính tương thích của trình duyệt chéo, đó là yêu cầu), nhưng, như bạn có thể thấy trên ảnh đính kèm (ảnh trên cùng là chrome, dưới từ safari), safari ám ánh sáng không mong muốn dòng. Không có gì giúp - định vị tuyệt đối, đặt một khối trên khác để che giấu đường sáng đó. Đó là vấn đề cụ thể đối với safari, có thể bởi vì sau khi transformX gờ của khối được chống răng cưa, và vì scaleX, mép gờ bên trở nên sáng hơn. Các trình duyệt khác không làm điều đó.
Có ai có ý tưởng làm thế nào tôi có thể sửa lỗi này để hiển thị mà không có các dòng đó trong safari không?
Một minh họa là tốt, nhưng bạn có thể tạo ra một jsfiddle với đánh dấu CSS của bạn để chúng tôi có thể tái tạo điều này trong các trình duyệt khác nhau không? – Anson