Jekyll Chirpy 이미지에 반짝임 버그

깃페이지를 운영하면서 Chirpy 테마를 사용중인데

이미지에 다음과 같이 로딩 이펙트가 계속 사라지지 않고 남아있는 버그가 발생하였다

세줄요약

---

1. Chirpy 테마 자체의 문제
2. Shimmer 이펙트가 Lazy-loading 이후 꺼지지 않음
3. _sass/addon/common.scss/commons.scss에서 Shimmer 정의 부분을 주석처리해버림

크롬 개발자도구로 찍어본 결과

img-link.shimmer::before 라는 속성이 움직이는게 확인되었다.

일단 나는 이미지를 깃 페이지 레포지토리의 Image 또는 asset 폴더에 넣는게 아니라

클라우드(원드라이브)의 임베딩 링크를 통해 이미지를 넣고있었다

1. 클라우드 이미지 서버 문제?

---

원드라이브 자체에서 이미지를 임베딩 링크로 가져올때 발생하는 문제인가 싶어

다른 사이트에도 임베딩을 해봤지만, 내 깃 페이지에서만 증상이 나타나는것을 확인했다

2. Chirpy 테마 자체의 문제?

---

확인해보니 같은 증상을 가진 사람들이 이슈를 올렸었고, closed 된 것 을 확인할 수 있었다

https://github.com/cotes2020/jekyll-theme-chirpy/issues/1100

“브라우저가 캐시에서 이미지를 로드할 때, Lazyloaded 이벤트가 사라지지 않으므로, JS 로직이 Shimmer 이펙트를 제거할 수 없음”

이라고 문제점을 분석해준 분이 있었다

Chirpy 테마 개발자분들이 이를 확인하고 버그픽스를 했다고 나와있지만,

최신버전을 사용중인 나한테도 계속 발생했다.

3. 임시 해결법

---

_sass/addon/common.scss/commons.scss 파일의

&::before{
    content: '';
    // position: absolute;
    // background: var(--shimmer-bg);
    // height: 100%;
    // width: 100%;
    // -webkit-animation: shimmer 1.3s infinite;
    // animation: shimmer 1.3s infinite;
}

shimmer 애니메이션의 정의 부분을 찾아 주석처리해버렸다.

관련 로직들은 계속 동작하므로 임시방편이지만,

일단 매우 거슬리는 이펙트는 사라졌다