Firefox가 이전에 캐시된 이미지(프로필 사진)를 불러오거나 렌더링하지 못하는 경우가 있습니다

[supermathie (Michael Brown)]

디스크에 캐시된 아바타가 이후 요청에서 가져와질 때 발생하는 Firefox 버그로 보이는 문제를 조사하고 있습니다.

Firefox에 다음과 같이 보고되었습니다:

1899184 - Firefox is sometimes unable to load/render previously cached images

이 문제가 나타나는 방식은 일반적으로 아바타가 표시되어야 할 위치에 아바타가 누락되는 것입니다. 예:

이것들은 각각 다음과 같습니다:

<img loading="lazy" alt="" width="24" height="24" src="https://dub1.discourse-cdn.com/arduino/user_avatar/forum.arduino.cc/mancera1979/48/732001_2.png" class="avatar" title="mancera1979 - Frequent Poster">
<img loading="lazy" alt="" width="24" height="24" src="https://dub1.discourse-cdn.com/arduino/user_avatar/forum.arduino.cc/jca34f/48/340148_2.png" class="avatar" title="JCA34F - Frequent Poster">

그리고 해당 URL들은 각각 다음과 같이 리다이렉트됩니다:

https://europe1.discourse-cdn.com/arduino/optimized/4X/3/3/7/337a5e4169461364c9805cfad882c9eb0332bdf3_2_48x48.png
https://europe1.discourse-cdn.com/arduino/optimized/4X/4/b/8/4b8c803f304aa7e7c487184224ec9f970c96e8c4_2_48x48.jpeg

Devtools를 사용하여 DOM을 검사할 때 Firefox는 "이미지를 로드할 수 없음"이라고 보고합니다.

이것이 실패하는 경우는 절대 초기 요청에서 일어나지 않습니다 - 캐시에서 이미지를 로드해야 하는 항상 후속 요청에서만 발생했습니다:

페이지를 다시 로드하면 Firefox가 이미지를 올바르게 로드하도록 트리거되는 경우가 있습니다. 예:

다시 로드 후:

---

우리가 아는 바:

… 이 문제는 Discourse 애플리케이션 자체에만 국한되지 않습니다. 아바타 링크만 포함된 정적 HTML 페이지에서 문제를 재현했습니다:

… Firefox에서 http3를 비활성화해도 문제가 해결되지 않습니다

… 브라우저 캐시를 비우면 다음에 이미지가 올바르게 로드됩니다

… 최종 사용자들이 데스크톱과 모바일 모두에서 이 문제를 보고했습니다

우리가 의심하는 바:

… 이것이 리다이렉트 후에 이미지가 로드되는 것과 관련이 있을 수 있습니다

우리의 일부 호스팅 환경에는 "리다이렉트 추격자(redirect chaser)"가 설치되어 있어 원래 URL에 대한 요청이 리다이렉트 대신 이미지 자체를 반환하도록 합니다. 저는 그런 환경에서 이 문제를 경험한 사람이 없다고 믿습니다.

우리가 가지고 있지 않은 것:

문제의 시작부터 끝까지 일관되고 명확한 재현 방법

[piffy]

저도 Firefox에서 이 문제를 직접 확인했습니다. 이게 관련이 있는지 모르겠지만, 제 사이트는 bunny.net를 CDN으로 사용하고 있습니다.

[supermathie (Michael Brown)]

흥미롭네요. 알겠습니다. 추가적인 세부 정보나 재현 단계를 가지고 있다면, 여기에 자유롭게 게시해 주세요.

---

@piffy

제 사이트는 bunny.net를 CDN으로 사용하고 있습니다.

글쎄요, 이건 정말로 너무 적절한 것 같네요

[sam (Sam Saffron)]

@supermathie

loading="lazy"

@david 에게는 이것이 우리의 다음 목표처럼 느껴집니다. 이 기능이 어떤 영향을 미치는지 확인하기 위해 이를 비활성화하는 사이트 설정을 추가하는 것이죠.

[david (David Taylor)]

@supermathie 님이 정적 페이지에서 대략적인 재현 방법을 가지고 있으므로, loading="lazy"를 제거한 버전을 만들어 보는 건 어떨까요? Discourse를 수정하는 것보다 훨씬 쉽습니다.

@supermathie 님, 이걸 시도해 보실 수 있을까요?

[piffy]

다른 CDN은 절대 안 쓸 거예요!

[supermathie (Michael Brown)]

간헐적으로 재로딩을 해왔고, 방금 레이지 페이지를 로드한 후(정상 작동) 비레이지 페이지를 로드했을 때(실패) 문제를 재현했습니다:

불행히도, 개발자 도구가 열려 있는 상태에서 Firefox는 재로딩 시 캐시 무효화가 설정되지 않았음에도 에셋을 완전히 다시 로드하는 것처럼 보였지만… 이건 이상합니다:

사용자가 아바타를 변경/업데이트한 것 같고, 우리는 새 아바타로 리다이렉트된 건가요? 이것이 어떤 것을 트리거하는지 확신이 서지 않습니다 @david.

제 추측으로는, 이 추가적인 리다이렉트가 Firefox 버그를 일시적으로 트리거한 것 같습니다. 이는 리다이렉트 체이서(redirect chaser)로 인한 동작 차이와 일치합니다.

제가 재현해 볼 수 있을까요?

아바타를 변경해 보겠습니다. 1시간 후에 재로딩했을 때 깨지는지 확인해 보겠습니다.

수정: 음, 이번에는 깨지지 않았습니다

하지만 이 페이지에서 제가 한 조작들이 다른 페이지에 악영향을 미치는 것 같습니다… 현재 이 아바타들 중 어느 것도 작동하지 않고, 네트워크 요청이 “막혀” 있기 때문이라고 생각합니다.

[supermathie (Michael Brown)]

오늘: lazy를 추가해서 페이지를 다시 로드했는데, 정상적으로 로드되었습니다:

그다음 lazy 없이 페이지를 로드했는데:

[david (David Taylor)]

그러니까 lazy=가 문제의 원인이 될 가능성은 낮다는 뜻이겠네요? 적어도 한 가지는 제외할 수 있게 됐네요