Lightboxが機能しなくなりましたか？

バグ
1

投稿内の画像をクリックすると、ライトボックスフレーム内で開くのではなく、画像が新しいページ（画像への直接リンク）として開くようになったのですが、何が変更されたのか分かりません。これは、以前は機能していた投稿内の大きな画像にも当てはまります。

この機能を有効/無効にするための新しい設定は管理インターフェースには見当たりません。この機能がいつ動作しなくなったのかも不明です。Discourseは/admin/upgradeページによると完全に最新の状態です。

画像がライトボックス表示されない理由をデバッグする方法はありますか？HTMLコードを見ると、「Lightbox」クラスが画像に正しく適用されていることがわかります（画像全体を囲むaタグにも「Lightbox」クラスがあります）。

image
image602×107 13 KB

私のサイトはCloudflareを使用しています。これが何らかの形で干渉している可能性はありますか？

よろしくお願いします！

「いいね！」 3
2

Discourse バージョン 2.9.0.beta3 でテストしましたが、問題を再現できませんでした。

トピック内の画像をクリックすると画像を含むライトボックスが表示され、HTML にはライトボックス クラスが画像にも適用されていることが示されています。

Discourse には Google Chrome バージョン 99.0.4844.82 経由でアクセスしており、テストした Discourse サイトは Digital Ocean 経由でホストされています。

これが、お使いのサイトでこの問題が発生している原因についての洞察を提供するのに役立つことを願っています。

「いいね！」 4
3

Cloudflareのロケットローダーやその他のJavaScript最適化をDiscourseで使用していますか？

もしそうであれば、まずそれらの最適化を無効にして、もう一度試してみてください。

「いいね！」 4
4

この問題はブラウザやOSに依存しないようです。macOSのFirefox、Chrome、Safari、iOSのSafari、WindowsのFirefox/Chrome/Edgeで確認しています。Lightboxが実際に機能するブラウザ/OSの組み合わせを見つけられていないため、サイト自体の問題、おそらく何らかの設定や他のプラグインが原因で壊れているのではないかと推測しています。

コンソールやサイトログに問題を示すようなものは何も表示されていないため、どこから手を付ければよいのか分かりません。

いいえ、Cloudflareの最適化や最小化オプションは使用していません。それらはすべて無効になっています。現在有効になっているのは、4時間のキャッシュのみです。

「いいね！」 1
5

本番サイトをローカルで複製し、問題を再現することができました。カスタムテーマプラグイン内のコードが原因で発生しているバグであることが判明しました。このコードがなぜLightboxを壊すのか、そしてなぜ最近になって問題になったのかは、まだ説明できません。コアのまだ発見されていないバグの可能性もありますか？

私のプラグインコードは非常にシンプルです。

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 }
  );
});

レンダリングされた投稿コンテンツの単純な文字列置換を試みているだけです。なぜか、これによりすべての投稿のすべてのLightboxが壊れます（文字列が含まれていないものさえも）。 elem.innerHTML = ...行をコメントアウトすると、Lightboxは再び機能します。

上記の例は簡略化されています（実際のプラグインは、投稿内の特定のレンダリングされたリンクを置き換え、調理済みコンテンツに対して他の操作を実行します）が、この非常にシンプルなコードでさえ、私が目にしている問題を再現します。

これは、投稿のレンダリング時に調理済みコンテンツを変更する正しい方法であり、Lightboxに関連する新しいコアバグですか？それとも、ずっと間違っていて、最初から機能するべきではなかったのでしょうか？

6

このLightboxの問題を再現するシンプルなテーマコンポーネントを作成しました。このテーマコンポーネントを有効にすれば、どのDiscourseインストールでもこの問題が再現できるはずです。
https://github.com/hayatae/lightbox-theme-component-bug

何か回避策や提案があれば教えてください！まだ、これが具体的に なぜ Lightboxを壊してしまうのかはっきりとは分かっていません。

7

もしこの問題に遭遇した他の人がいれば、とりあえず回避策を見つけました。

ライトボックス化される画像を含む要素に対して innerHtml の置換を 行わない 限り、問題は発生しません。コードの一部をより具体的に要素に一致するように修正し、画像周りの href で ない 要素のみを対象とすることができました。

「いいね！」 4