Mobile Safari lọc màu xám thêm mờ

Question

hình ảnh

Tôi desaturating với các bộ lọc này:

img { 
    filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); 
    filter: gray; 
    -webkit-filter: grayscale(1); 
} 

Nó hoạt động độc đáo, mặc dù các bộ lọc dường như pixellate hình ảnh trên di động Safari. Tôi không biết tại sao. Có một phương pháp bí mật để giữ lại sự rõ ràng? Hoặc tôi phải sống với thiếu sót trình duyệt này? Như một ví dụ, đây là một số ảnh chụp màn hình đặt cạnh nhau, lấy từ iOS Simulator:

Answer 1

Một chút quá muộn nhưng điều này nên làm như lừa:

-webkit-transform: translateZ(0); 

nguồn: http://matthewhappen.com/fixing-css3-filter-blur-on-retina-displays/

Answer 2

Tôi không biết liệu Safari di động được chọn lên các phong cách lọc hoặc -webkit-lọc.

Tôi không tin rằng bộ lọc -webkit cho phép bạn chỉ định độ phân giải bộ lọc, vì vậy nếu bạn muốn vượt quá hành vi mặc định này, bạn phải thêm bộ lọcRes = 400 vào định nghĩa bộ lọc hoặc thay thế là để nội tuyến svg và chỉ định một filterRes rõ ràng cho bộ lọc của bạn aka.

<svg> 
    <defs> 
    <filter id="greyscale" filterRes="1278"> 
     <feColorMatrix etc...> 
    </filter> 
    </defs> 

Images... 

</svg>