programing

CSS 전환 효과는 이미지를 흐리게 하거나 이미지를 1px 이동합니다. 크롬에서?

telebox 2023. 8. 25. 23:30
반응형

CSS 전환 효과는 이미지를 흐리게 하거나 이미지를 1px 이동합니다. 크롬에서?

나는 호버에서 CSS 전환 효과가 div를 이동시키는 CSS를 가지고 있습니다.

볼 수 , 문는볼, 수서있이,translate전환은 디비의 이미지를 1도 아래/오른쪽으로 이동시키는 끔찍한 부작용을 가지고 있습니다. (그리고 어쩌면 그렇게 약간의 크기 조정이 가능할까요?) 그래서 그것이 제자리에서 벗어나거나 초점에서 벗어난 것처럼 보입니다.

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

이 문제는 페이지에 스크롤 막대가 있을 때만 발생하는 것 같습니다.따라서 div의 인스턴스 하나만 있는 예제는 괜찮지만 동일한 div가 추가되면 페이지에 스크롤바가 필요하므로 문제가 다시 발생합니다.

2020년 업데이트

  • 흐릿한 이미지와 관련된 문제가 있는 경우 아래의 답변도 확인하십시오.image-renderingCSS 속.
  • Practice 및를 Best Practice 접 SEOwise 를경지미를다로대체있수다습니할음으근이로 할 수 .<img>개체 맞춤 CSS 속성을 사용하여 태그를 지정합니다.

원답

CSS에서 이것을 사용해 보십시오.

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

이것이 하는 일은 분할이 "더 많은 2D"로 동작하도록 만드는 것입니다.

  • 뒷면은 회전 등을 사용하여 물건을 뒤집을 수 있도록 기본으로 그려집니다.왼쪽, 오른쪽, 위로, 아래로 이동하거나 축척 또는 시계 반대 방향으로 회전하는 경우에는 그럴 필요가 없습니다.
  • Z축을 변환하여 항상 0 값을 갖도록 합니다.
  • 이제 Chrome처리다니합이다를 처리합니다.backface-visibility그리고.transform 없이-webkit-ㅠㅠㅠㅠ 는 현재 이 다른 브라우저 IE)에 어떤 을 미치는지 모르기을 주의해서 현재로서는 이것이 다른 브라우저 렌더링(FF, IE)에 어떤 영향을 미치는지 알 수 없으므로 접두사가 없는 버전을 주의하여 사용하십시오.

요소에 3D 변환을 적용해야 자체 합성 레이어를 얻을 수 있습니다.예를 들어:

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

또는

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

레이어 작성 기준에 대한 자세한 내용은 여기에서 확인할 수 있습니다.Chrome에서 렌더링 가속화

설명:

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

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

screenshot

여기서의 문제는 전환이 발생하는 동안 페이지에서 "춤추기" 또는 "깜빡이기" 요소를 효과적으로 만들 수 있는 내용의 재배열입니다.설정으로 이동하고 "복합 도면층 표시" 확인란을 선택한 다음 요소에 3D 변환을 적용하면 주황색 테두리로 윤곽이 표시된 고유 도면층이 표시됩니다.

screenshot

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

screenshot

임베디드 유튜브 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);요소가 로드된 후 요소의 위치를 변경하지만 해당 요소가 흐릿해집니다.

위의 모든 제안을 시도해 보았지만, 알고 보니 번역 값 중 하나에 십진수 값을 사용했기 때문이었습니다.정수는 흐림을 유발하지 않으며, 정수에서 멀어질수록 흐림은 더 심해집니다.

예5.5px를 가장 하고, 요를가장많흐하리고게이소,하▁bl,5.1px조금도.

누군가에게 도움이 될지도 모르니 여기에 두고 가야겠어요.

원활하지 않은 단계별 전환을 사용하여 문제를 속였습니다.

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

그것은 해결책이 아니라 부정행위이며 모든 곳에 적용될 수 없습니다.

설명할 수는 없지만, 저한테는 효과가 있어요.다른 어떤 답변도 도움이 되지 않습니다(OSX, Chrome 63, Non-Retina 디스플레이).

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

로 하고 2배로 zoom저를 위해 일했습니다.

transform: scale(2);
zoom: 0.5;

ㅠㅠfilter: blur(0);

그것은 나에게 효과가 있었다.

저는 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>

이것이 누군가에게 도움이 되길 바랍니다.

저는 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;
}

이 중 어느 것도 효과가 없었습니다. 제게 효과가 있었던 것은 이미지를 축소하는 것입니다.

따라서 원하는 이미지 크기 또는 이미지의 해상도에 따라 다음과 같은 작업을 수행할 수 있습니다.

.ok {
      transform: perspective(100px) rotateY(0deg) scale(0.5);
      transition: transform 1s;
      object-fit:contain;
}
.ok:hover{
      transform: perspective(100px) rotateY(-10deg) scale(0.5);
}

/* Demo Preview Stuff */
.bad {
   max-width: 320px;
   object-fit:contain;
   transform: perspective(100px) rotateY(0deg);
   transition: transform 1s;
}
.bad:hover{
      transform: perspective(100px) rotateY(-10deg);
}

div {
     text-align: center;
     position: relative;
     display: flex;
}
h3{
    position: absolute;
    bottom: 30px;
    left: 0;
    right: 0;
}
     
.b {
    display: flex;
}
<center>
<h2>Hover on images</h2>
<div class="b">
<div>
  <img class="ok" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
  <h3>Sharp</h3>
</div>

<div>
  <img class="bad" src='https://www.howtogeek.com/wp-content/uploads/2018/10/preview-11.png'>
  <h3>Blurry</h3>
</div>

</div>

</center>

이미지 크기를 줄여야 합니다. 이미지 해상도가 커야 합니다.

저는 텍스트가 흐릿한 것과 비슷한 문제를 겪었지만, 후속 div만 영향을 받았습니다.어떤 이유에서인지 제가 변신을 하고 있던 다음 디비는 흐릿했습니다.

저는 이 스레드에서 추천하는 모든 것을 시도했지만 아무 것도 되지 않았습니다.저는 디브를 재배열하는 것이 효과가 있었습니다.다음 div를 흐리게 하는 div를 부모 div 끝으로 옮겼습니다.

누군가 이유를 안다면 그냥 알려주세요.

#before
<header class="container">
      <div class="transformed div">
          <span class="transform wrapper">
            <span class="transformed"></span>
            <span class="transformed"></span>
          </span>
       </div>
       <div class="affected div">
       </div>
     </header>

#after
<header class="container">
   <div class="affected div">
   </div>
  <div class="transformed div">
      <span class="transform wrapper">
        <span class="transformed"></span>
        <span class="transformed"></span>
      </span>
   </div>

 </header>

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

전환 기간 값을 설정하여 도움을 받았습니다..3s동일한 전환 타이밍 단계.3s

키 프레임 애니메이션에서 '트랜스폼'을 애니메이션화할 때 크롬 전용(Windows 및 Mac)에서 흐림 현상이 발생했습니다.저에게는 -webkit-optimize-contrast 설정이 부분적으로만 도움이 되었습니다.최상의 결과를 얻으려면 척도 X에 "매직 값"을 사용해야 했습니다(1 대신 1보다 약간 큼).

작동한 코드는 다음과 같습니다.

img {
  image-rendering: -webkit-optimize-contrast;
}

@keyframes scale-in-left {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1.000001);
    opacity: 1;
  }
}

다음은 작동하지 않는 코드입니다(Chrome에서 이미지가 흐려짐).

@keyframes scale-in-left {
  0% {
    transform: scaleX(0);
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    opacity: 1;
  }
}

결국, "작동" 코드는 대부분의 흐림을 제거했지만, 모든 것은 제거하지 못했습니다.사파리와 파이어폭스는 특별한 설정 없이도 여전히 선명했습니다.

또한 브라우저 창 크기를 조정하는 것만으로도 불필요한 흐림이 해소되어 Chrome이 최종 렌더 패스(?)를 실행하지 못하는 원인이 될 수 있습니다.

언급URL : https://stackoverflow.com/questions/15464055/css-transition-effect-makes-image-blurry-moves-image-1px-in-chrome

반응형

'programing' 카테고리의 다른 글

치수 정보가 손실되지 않는 Numpy 인덱스 조각  (0) 2023.08.25
UIView 블록 기반 애니메이션을 취소하려면 어떻게 해야 합니까?  (0) 2023.08.25
Angular 4+에서 보류 중인 모든 HTTP 요청을 취소/구독 해제하는 방법  (0) 2023.08.25
Ajax와 함께 작동하는 Adsense를 위한 솔루션이 절실히 필요합니다.  (0) 2023.08.25
집합이 비어 있는 경우 부울 반환  (0) 2023.08.25

'programing'의 다른글

  • 현재글CSS 전환 효과는 이미지를 흐리게 하거나 이미지를 1px 이동합니다. 크롬에서?

관련글

댓글

티스토리툴바