CSS3 높이 전환시 이미지가 흐림

사이트를 개발 중이며 데모가 here으로 표시 될 수 있습니다. 내가 직면 한 문제는 스크롤하는 동안 로고의 높이가 줄어들면 약간의 시간이 흐려진다는 것입니다. 다시 스크롤 업하면 로고가 원래 크기로 복원됩니다. 이것은 Chrome과 IE (가장자리)에서 발생하지만 Firefox에서는 잘 작동합니다.CSS3 높이 전환시 이미지가 흐림

적용되는 CSS3 전환 때문에 발생하는 것 같습니다. 변환을 제거하면 잘 변형됩니다. 전환이 적용된다

transition: all 0.3s ease-in-out; 
    transition-property: all; 
    transition-duration: 0.3s; 
    transition-timing-function: ease-in-out; 
    transition-delay: initial;

속성은 height이다.

처음 : 나는 here 주어진 다음을 추가했지만, 한 height: 2.375rem;

가 작동하지 않았다 : 스크롤시 height: 3.125rem; . 사실, 다음을 추가하면 아무런 스크롤 없이도 이미지가 약간 흐려집니다.

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0) scale(1.0, 1.0);

또한 :

-webkit-transform: translate3d(0,0,0); 
transform: translate3d(0,0,0);

출처

2016-08-25 Fahad

로고의 너비가 * 1,000 * 픽셀 너비 이상인 것을 알고 있습니까? –

래스터 이미지 크기를 조정하면 필연적으로 약간의 흐림이 발생합니다. 대신 벡터 그래픽 (SVG)을 사용해보십시오. –

명확히하기 위해 내가 지적한 이유는 브라우저가 이미지를 크기 조정하는 데에만 많은 시간을 할애 할 수 있기 때문입니다. 네 가지 다른 축소 방법이있는 포토샵이 아닙니다. 최종 150px ~ 200px 크기에 가까운 크기 조정 된 버전을 다시 업로드하면 래스터 화 된 이미지가 훨씬 멋지게 보입니다. Photoshop 또는 다른 이미지 편집기가 클라이언트 측 브라우저 대신 크기 조정을 이해하도록합니다. Marat가 지적한 것처럼 벡터도 좋은 아이디어 일 수 있습니다. –

브라우저는 당신을 위해 이미지 크기를 조정하기 위해 너무 많은 작업을 수행 할 수 있습니다. 네 가지 다른 축소 방법이있는 포토샵이 아닙니다. 최종 150px ~ 200px 크기 (아마도 200px 범위)에 가까운 크기 조정 된 버전을 다시 업로드하면 래스터 화 된 이미지가 훨씬 멋지게 보일 것입니다. Photoshop 또는 다른 이미지 편집기가 클라이언트 측 브라우저 대신 크기 조정을 이해하도록합니다. Marat가 지적한 것처럼 벡터도 좋은 아이디어 일 수 있습니다.

출처

2016-08-25 20:47:29

CSS3 높이 전환시 이미지가 흐림

답변

관련 문제