크기 조정시 WebKit 거친 이미지

Question

WebKit에서 이미지 (로고)의 크기를 조정하면 몇 초 동안 들쭉날쭉하게 나타납니다. 우리는 CSS의 너비를 변경하고 축척 변환을 사용하여 크기를 조정하려고했습니다. 이 문제를 해결할 방법이 있습니까?

http://codepen.io/Znarkus/pen/xbxKLK

예 HTML은 :

는

<div> 
    <img src="http://i.imgur.com/LoN4Mnz.png"> 
</div> 

CSS는 :

div { 
    width: 300px; 
    height: 100px; 
    background: #ddd; 
} 

img { 
    max-width: 100%; 
} 


div:hover img { 
    width: 200px; 
} 

Answer 1

의 안티 앨리어싱에 문제가 될 것으로 보인다 짧은 지연이있는 이미지. 내 검색을 통해이 문제를 해결하는 방법에 대한 좋은 답변이 없었으므로 두 가지 가능한 해결책을 찾았습니다.

해결하는 1

미리 렌더링 된 이미지의 두 버전을 유지하고 다른 크기를 전환.

프로 : 완벽한

단점 렌더링은 : 안티 앨리어싱을 해제하기 위해 더 많은 메모리를

해결 방법 2

사용자 image-rendering CSS 속성을 이동합니다. div에 image-rendering: [browser specific see codepen fork];을 추가하면 이미지의 렌더링이 앤티 엘리 어싱없이 좋지 않음을 알 수 있습니다.

프로 : 모든 CSS, 별도의 메모리 소비

단점 : 적은 이미지 품질

http://codepen.io/anon/pen/XJWrvJ

편집 : 해결 방법 3

두 번째로 다른 해결책이있을 수 있습니다. 이미지는 특히 텍스트를 렌더링하는 데 훌륭하지 않지만, 로고이기 때문에 텍스트 나 스타일에 특별한 비꼬아 짐이 있습니다. 로고를 svg로 내보내 캔버스에서 렌더링 할 수 있다면 이러한 문제를 해결할 수 있습니다.