Chrome 애니메이션 GIF 배경 이미지가 재생되지 않음 - 배경 크기

배경 이미지로 애니메이션 gif가 포함 된 미리보기 이미지 버튼을 표시하려고합니다. 그러나 크롬에서만 gif는 반복되지 않습니다.Chrome 애니메이션 GIF 배경 이미지가 재생되지 않음 - 배경 크기

FF와 Edge는 잘 작동합니까?!

Chrome Dev 도구에서 배경 크기로 재생할 때 gif가 특정 %에서 반복됩니다.

HTML

<span class="thumbnail"></span>

CSS는

.thumbnail { 
    background-position: -12px -14px; 
    background-size: 150%; 
    background-color: rgb(250, 252, 252); 
    background-image: url(https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif); 
    ... 
}

나는 문제를 보여주기 위해 jsfiddle을 만들었습니다.

배경 크기가 다른 두 번째 축소판을 만들면 두 축소판 모두 반복되는 gif! ???

이유를 아는 사람이 있습니까? CSS에 문제가 있습니까? 아니면이 버그가 Chrome에 있습니까?

출처

2016-09-23 Tom Van Rossom

배경 - ** 위치 ** 변경 사항을 삭제하면 문제가없는 것 같습니다. 그런 다음 위치 변경이 px가 아닌 %로 다시 입력되면 https://jsfiddle.net/hL2boada/12/ –

https://jsfiddle.net/hL2boada/14/ –

여전히 문제가 있습니다. '%'만 사용할 때! :(https://jsfiddle.net/tomvanrossom/hL2boada/15/ –

다음 코드를 사용하여 동일한 결과를 얻을 수 있습니다. 크롬, FF와 IE

에서 그 작업을 잘

CSS

.thumbnail { 
    background-position: -12px -14px; 
    background-size: 150%; 
    background-color: rgb(250, 252, 252); 
    border-radius: 50%; 
    border: 2px solid rgb(116, 200, 184); 
    box-sizing: border-box; 
    color: rgb(83, 181, 161); 
    cursor: auto; 
    display: block; 
    filter: none; 
    font-family: Ubuntu, sans-serif; 
    font-size: 14px; 
    height: 142px; 
    line-height: 20px; 
    margin: 12px; 
    max-width: 100%; 
    opacity: 0.5; 
    overflow-x: hidden; 
    overflow-y: hidden; 
    padding: 5px; 
    position: relative; 
    width: 142px; 
}

HTML :

<span><img class="thumbnail" src="https://media.giphy.com/media/xTiTnxd70rHICWIQSs/giphy.gif"></span>

이 밖으로 시도 :이 특별한 경우 https://jsfiddle.net/hL2boada/11/

출처

2016-09-23 11:33:17

당신의 피들 백그라운드에서 애니메이션 GIF되지 않습니다보십시오 ... – Luciano

을 다음 수정 버그 :

background-position: center;

며칠 전에 백그라운드 GIF가 Chrome에서 작동하지 않을 때 유사한 문제에 직면 한 이후 크롬 문제인 것으로 보입니다.

this release에서 배경 렌더링과 관련하여 많은 변경을 한 것처럼 보입니다.

출처

2016-09-30 10:06:11 Lunokhod

Chrome 애니메이션 GIF 배경 이미지가 재생되지 않음 - 배경 크기

답변

관련 문제