Trục trặc khi sử dụng hình ảnh mặt nạ gradient css với biến đổi 3d

Question

Tôi đang sử dụng thị sai css thuần túy dựa trên hướng dẫn của Keith Clark, sử dụng phép biến đổi 3d.

transform: translate3d(0, 0, -30px) scale(1.31); 

Ngoài ra tôi đang sử dụng hình ảnh mặt nạ gradient css với bố cục hình tròn cho các lớp bị sai.

mask-image: radial-gradient(10px circle at 50% 150px, transparent 0, black 100%) 

Tôi đã tạo bản trình diễn trên codepen với đồ họa mẫu: https://codepen.io/justynaj/full/veyJLz/.

Trong một số trình duyệt, tôi thấy sự cố đáng kinh ngạc. Vấn đề lớn nhất là sự ổn định xuất hiện không xác định. Tôi nhận thấy rằng xác suất của ocuurence sự cố này tăng lên khi CPU/GPU máy tính của tôi được tải. Trục trặc xuất hiện trong các trình duyệt dựa trên webkit, ví dụ trình duyệt Opera trên Windows 10 hoặc trình duyệt Chrome trên Android. Đôi khi chúng hiển thị ngay sau khi tải trang và đôi khi sau khi cuộn trang.
Ảnh chụp màn hình mẫu: https://image.ibb.co/hQcrmG/chrome_android.png.

Bất kỳ ý tưởng nào gây ra hành vi trình duyệt lạ này?

Answer 1

rách (Ổn) khi di chuyển được giảm đáng kể khi tôi cố gắng sử dụng đồng bằng background-color thay vì JPEG yếu tố img:

https://codepen.io/Pendrokar/full/gGKGZO/

<img style="background-color:red" alt="" class="bg-img" aria-hidden="true"> 

sử dụng "phong cách" chỉ dành cho mục đích cuộc biểu tình nhanh chóng như thay thế "src" nhanh hơn xóa và thêm các quy tắc CSS. Nếu giải pháp này đủ tốt, hãy thay thế các phần tử "img" bằng "div".