CSS 전환 효과로 인해 이미지가 흐려 지거나 이미지가 1px 이동합니까?

가리키면 CSS 전환 효과가 div를 이동시키는 CSS가 있습니다.

예제에서 볼 수 있듯이 문제는 translate전환이 div의 이미지를 1px 아래 / 오른쪽으로 움직이고 (아마도 약간 크기가 조정될 수 있습니까?) 부작용이 발생하여 제자리에 나타나지 않고 초점없는...

글리치는 호버 효과가 적용되는 전체 시간 동안 적용되는 것으로 보이며 시행 착오 과정에서 변환 전환이 div를 이동할 때만 발생한다고 생각할 수 있습니다 (상자 그림자 및 불투명도 적용되지만 차이는 없습니다) 제거시 오류).

페이지에 스크롤 막대가있는 경우에만 문제가 발생하는 것 같습니다. 따라서 하나의 div 인스턴스가있는 예제는 훌륭하지만 한 번 더 동일한 div가 추가되고 페이지에 문제가 다시 발생하는 스크롤 막대가 필요합니다 ...

2020 업데이트

• 흐릿한 이미지에 문제가있는 경우 아래 image-renderingCSS 속성 , 특히 CSS 속성 을 확인하십시오 .
• 모범 사례 접근성과 SEO를 현명하게 <img>사용하려면 객체 맞춤 CSS 속성을 사용하여 배경 이미지를 태그로 바꿀 수 있습니다.

원래 답변

CSS 에서 이것을 시도하십시오 :

.your-class-name {
    /* ... */
    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

이것이하는 일은 부서가 "더 많은 2D"로 동작하게 만드는 것입니다.

• 뒷면이 기본으로 그려져 회전 등으로 물건을 뒤집을 수 있습니다. 시계 방향으로 왼쪽, 오른쪽, 위, 아래로, 크기 조절 또는 회전 (반대) 만 움직일 필요는 없습니다.
• 항상 0 값을 갖도록 Z 축을 변환합니다.
• 이제 핸들 크롬 backface-visibility과 transform포함하지 않는 -webkit-접두사. 현재 이것이 다른 브라우저 렌더링 (FF, IE)에 어떤 영향을 미치는지 알 수 없으므로 접두사가 아닌 버전을주의해서 사용하십시오.

요소에 3D 변형을 적용해야하므로 자체 합성 레이어를 얻게됩니다. 예를 들어 :

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

또는

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

레이어 생성 기준에 대한 자세한 내용은 여기 ( Chrome의 가속 렌더링)를 참조 하십시오.

설명:

예 (녹색 상자 위로 이동) :

• 문제 : 전환으로 인해 형제 요소에 깜박임 효과가 발생할 수 있음 (OSx Lion, Chrome 30)
• 솔루션 : 자체 복합 레이어의 요소

요소에서 전이를 사용하면 브라우저에서 스타일을 다시 계산 한 다음 전이 속성이 시각적 (내 예에서는 불투명) 인 경우에도 내용을 다시 레이아웃하고 요소를 마지막으로 페인트합니다.

여기서 문제는 전환이 발생하는 동안 페이지에서 "춤"또는 "깜박임"요소를 적용 할 수있는 내용을 다시 레이아웃하는 것입니다. 설정으로 이동하여 "복합 레이어 표시"확인란을 선택한 다음 요소에 3D 변형을 적용하면 주황색 테두리가있는 자체 레이어가 표시됩니다.

요소가 자체 레이어를 얻은 후 브라우저는 재 레이아웃이나 페인트 작업없이 전환시 레이어를 합성하면되므로 문제를 해결해야합니다.

내장 된 YouTube iframe과 동일한 문제가있었습니다 (번역은 iframe 요소의 중심을 맞추기 위해 사용되었습니다). CSS 필터 재설정을 시도 하고 마술이 발생할 때까지 위의 솔루션 중 어느 것도 작동하지 않았습니다 .

구조:

<div class="translate">
     <iframe/>
</div>

스타일 [전]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

스타일 [후]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

최신 브라우저에서 테스트 한 실험적인 새로운 속성 CSS를 권장했으며 좋습니다.

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

이를 통해 브라우저는 렌더링 알고리즘을 알게됩니다

변형 될 때 요소가 흐려지는 또 다른 이유를 발견했습니다. transform: translate3d(-5.5px, -18px, 0);요소를로드 한 후 위치를 바꾸는 데 사용 했지만 해당 요소가 흐릿 해졌습니다.

위의 모든 제안을 시도했지만 번역 값 중 하나에 10 진수 값을 사용했기 때문인 것으로 나타났습니다. 정수는 흐려짐을 유발하지 않으며, 정수에서 멀어 질수록 흐려짐이 심해집니다.

즉 5.5px, 요소를 가장 흐리게합니다 5.1px.

누군가를 도울 수 있도록 여기에 척 할 것이라고 생각했습니다.

부드럽게 전환하지 않고 단계별로 전환을 사용하여 문제를 속였습니다.

transition-timing-function: steps(10, end);

그것은 해결이 아니며, 부정 행위이며 어디에서나 적용 할 수 없습니다.

나는 그것을 설명 할 수 없지만 그것은 나를 위해 작동합니다. 다른 답변이 도움이되지 않습니다 (OSX, Chrome 63, 비 레티 나 디스플레이).

https://jsfiddle.net/tuzae6a9/6/

두 배로 확장하고 절반으로 zoom줄이면 나를 위해 일했습니다.

transform: scale(2);
zoom: 0.5;

약 10 가지 해결책을 시도했습니다. 그것들을 섞어도 여전히 제대로 작동하지 않았습니다. 끝에 항상 1px의 흔들림이있었습니다.

필터의 전환 시간을 줄여 솔루션을 찾습니다.

이것은 작동하지 않았다 :

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

해결책:

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

바이올린으로 해보십시오.

.blur {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: #f0f;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .7s ease-out;
  /* transition: all .2s ease-out; */
}
.blur:hover {
  -webkit-filter: blur(0);
}

.blur2 {
  border: none;
  outline: none;
  width: 100px; height: 100px;
  background: tomato;
  margin: 30px;
  -webkit-filter: blur(10px);
  transition: all .2s ease-out;
}
.blur2:hover {
  -webkit-filter: blur(0);
}

<div class="blur"></div>

<div class="blur2"></div>

나는 이것이 누군가를 돕기를 바랍니다.

시험 filter: blur(0);

그것은 나를 위해 일했다

나를 위해, 지금 2018 년. 내 문제를 해결 한 유일한 것은 (호버에서 이미지를 통과하는 흰색 깜박임 깜박임)이 이것을 가지고있는 이미지 요소를 보유하는 링크 요소에 적용하는 것입니다. transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

전환 지속 시간 .3s값을 전환 타이밍 단계와 동일하게 설정하여 도움을 받았습니다..3s

같은 문제가 발생했습니다. 나를 위해 일한 부모 요소에 position : relative를 설정하십시오.