Firefox의 밴딩 아티팩트 CSS3 필터 속성의 흐림 효과

Question

브라우저와 구문이 다르긴하지만 CSS3 필터 속성을 사용하고 Chrome과 Firefox에서 비슷한 결과를 얻으려고합니다. Firefox에서 내가에 SVG 필터를 참조하는 흐림 효과를 적용하려면 다음 CSS를 사용하고

#chrome-blur { 
    -webkit-filter: blur(10px); 
} 

:

크롬에서 나는 이미지에 흐림 효과를 적용하기 위해 다음과 같은 CSS를 사용하고 페이지의 본문.

#firefox-blur { 
    filter: url(#blur); 
} 

이 모든 것이 정상적으로 작동하지만 Firefox 버전은 흐려진 이미지에 밴딩을 표시합니다. 내 SVG 필터가 작동해야하는지 아니면 Firefox의 알고리즘에 문제가 있는지 궁금합니다. 맥 OS에 http://codepen.io/vcurd/pen/pDwqr

Answer 1

에서

전체 예를 들어,이 멋지다 더 밴딩이 없다, 그래서 이것은 Windows에서만 (비스타 이상)을 발생하는 것 같습니다. 파이어 폭스는 윈도우에서도 똑같이 나쁜 그라디언트 구현을한다. 그래서 네이티브 그래픽이 무엇을 사용하고 있는지에 대한 의문이 든다. 이미지를 흐리게하기 전에 이미지를 다운 샘플링하는 효과가있는 filterRes를 사용하여 필터 해상도를 다이얼 다운하여 특정 이미지의 밴딩 중 최악의 결과를 제거 할 수 있습니다.

<filter id="blur" filterRes="60"> 

좋은 결과로 보입니다. 단점은 MacOS에서 이제 픽셀 화 된 것처럼 보입니다.

나는 노이즈 추가, 변위 맵, 여러 가지 블러를 함께 조합하는 것, 컬러 보간 필터 및 이미지 렌더링과 같은 CSS 설정을 실험했지만 아무 것도 수정하지 않고 다운 샘플링을 시도합니다.