라이트박스가 더 이상 작동하지 않나요?

기여 버그
1

무엇이 변경되었는지 정확히 모르겠지만, 오늘 갑자기 게시물에서 이미지를 클릭하면 라이트박스 프레임 안에서 열리지 않고 이미지 자체가 새 페이지로(이미지 직접 링크) 열리기 시작했음을 확인했습니다. 이전에 정상적으로 작동했던 게시물 내 큰 이미지들도 포함됩니다.

관리자 인터페이스에서 이 기능을 활성화/비활성화할 수 있는 새로운 설정을 찾지 못했습니다. 이 기능이 언제부터 작동하지 않게 되었는지도 확실하지 않습니다. /admin/upgrade 페이지에 따르면 Discourse는 최신 상태로 업데이트되어 있습니다.

이미지가 라이트박스로 표시되지 않는 이유를 디버깅할 방법이 있을까요? HTML 코드에서 이미지에 “Lightbox” 클래스가 올바르게 적용되고 있는 것을 확인할 수 있습니다 (이미지를 감싸고 있는 a 태그에도 “Lightbox” 클래스가 있음):

image
image602×107 13 KB

제 사이트는 Cloudflare를 사용하고 있습니다. 이것이 어떤 방식으로든 간섭을 일으키고 있는 것은 아닐까요?

감사합니다!

3개의 좋아요
Lightbox not working on Discourse
Image Lightbox not working from start
2

Discourse 2.9.0.beta3 버전으로 이 문제를 테스트해 보았으나 재현하지 못했습니다.

토픽 내의 이미지를 클릭하면 해당 이미지가 포함된 라이트박스가 표시되며, HTML을 확인해 보면 라이트박스 클래스가 이미지에 적용되고 있는 것을 볼 수 있습니다.

저는 Google Chrome 99.0.4844.82 버전을 통해 Discourse에 접근하고 있으며, 테스트에 사용한 Discourse 사이트는 Digital Ocean을 통해 호스팅되고 있습니다.

이 정보가 여러분 사이트에서 이 문제가 발생하는 원인에 대한 추가적인 통찰력을 제공하는 데 도움이 되기를 바랍니다.

4개의 좋아요
3

Discourse에서도 Cloudflare의 Rocket Loader나 기타 JS 최적화 기능을 사용 중이신가요?

그렇다면, 해당 최적화 기능을 비활성화한 후 다시 시도해 보시는 것이 좋습니다.

4개의 좋아요
4

이 문제는 브라우저나 OS에 따라 발생하는 것으로 보이지 않습니다. macOS의 Firefox, Chrome, Safari와 iOS의 Safari, 그리고 Windows의 Firefox/Chrome/Edge에서 모두 확인되고 있습니다. Lightbox가 실제로 정상 작동하는 브라우저/OS 조합을 찾지 못했기 때문에, 사이트 자체의 문제, 예를 들어 특정 설정이나 다른 플러그인이 원인을 제공하고 있는 것 같습니다.

콘솔이나 사이트 로그에서 문제를 가리키는 내용을 전혀 찾아볼 수 없어서, 어디서부터 어떻게 시작해야 할지 막막합니다.

아니요, Cloudflare에서 최적화나 최소화(minimizing) 옵션을 사용하지 않고 있습니다. 해당 기능들은 모두 비활성화되어 있습니다. 현재 활성화되어 있는 것은 4시간 캐싱 기능뿐입니다.

1개의 좋아요
5

프로덕션 사이트를 로컬에 복제하여 문제를 재현할 수 있었습니다. 결국 제가 작성한 커스텀 테마 플러그인의 일부 코드 때문에 나타나는 버그인 것으로 밝혀졌습니다. 왜 라이트박스가 깨지는지, 그리고 왜 최근에야 문제가 발생하게 되었는지는 여전히 설명할 수 없습니다. 코어에 아직 발견되지 않은 버그가 있는 걸까요?

제 플러그인 코드는 매우 단순합니다:

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("0.11.1", (api) => {
  // Render adjustments for post content
  api.decorateCookedElement(
    (elem) => {
      elem.innerHTML = elem.innerHTML.replace(/Finances/, "Test Str");
    },
    { id: "test-decorator", onlyStream: true }
  );
});

이 코드가 하려는 것은 렌더링된 게시글 내용에서 간단한 문자열 치환을 하는 것입니다. 그런데 어째서인지 이 코드 때문에 모든 게시글의 모든 라이트박스가 깨집니다(해당 문자열이 없는 게시글도 포함됩니다). elem.innerHTML = ... 라인을 주석 처리하면 라이트박스가 다시 정상 작동합니다.

위 예시는 단순화된 것입니다(실제 플러그인은 게시글의 특정 렌더링된 링크를 교체하고 쿠크드 콘텐츠에 다른 작업을 수행합니다) 하지만, 위와 같이 매우 단순한 코드만으로도 제가 겪고 있는 문제를 재현할 수 있습니다.

게시글 렌더링 시 쿠크드 콘텐츠를 수정하는 것이 이 방식이 맞으며, 이는 라이트박스 관련 새로운 코어 버그인가요? 아니면 처음부터 잘못된 방식으로 작성한 것이었고, 애초에 이렇게 작동할 수 없었던 것인가요?

6

이 Lightbox 문제를 재현할 수 있는 간단한 테마 컴포넌트를 만들었습니다. 이 테마 컴포넌트를 활성화하면 어떤 Discourse 설치 환경에서도 누구나 문제를 재현할 수 있습니다:
https://github.com/hayatae/lightbox-theme-component-bug

가능한 우회 방법이나 제안이 있으시면 알려주세요! Lightbox가 왜 깨지는지 정확히 아직 파악하지 못했습니다.

7

이 문제를 겪고 계신 다른 분들을 위해, 당분간 사용할 수 있는 우회 방법을 찾았습니다.

라이트박스로 표시될 이미지가 포함된 요소에 대해 innerHTML 대체 작업을 수행하지 않는 한, 이 문제는 발생하지 않습니다. 저는 코드를 일부 수정하여 요소를 더 구체적으로 매칭하고, 이미지 주위에 href가 아닌 요소만 대상으로 하도록 했습니다.

4개의 좋아요