Zoho SalesIQ モバイル版の黒画面問題

皆さん、こんにちは。長文になり申し訳ありませんが、数日間、ask.discourse と自分の Claude インスタンスを使って自力で修正を試みてきました。Claude に、試した内容やその他の質問を含む添付レポートを作成してもらいました。まず、初期のコンテキストをお伝えします。

Discourse サポートへの完全なコンテキスト
サイト: canbarforum.incba.org(メンバー管理システムからの SSO が必要)
テーマ: Horizon(公式 Discourse リモートテーマ)
Discourse バージョン: v2026.9.0-latest(Ember v7.2.0)
サードパーティ統合: Zoho SalesIQ(訪問者追跡ウィジェット。「Busy」ステータスに意図的に設定済み — 追跡のみで、チャットバブルの表示は意図していない)

  1. 目的
    Zoho SalesIQ を、匿名の訪問者追跡(ページビュー、ライブプレゼンス)専用にインストールすること。ウィジェットは意図的に「Busy」ステータスに保たれているため、チャットバブルの表示は不要です。デスクトップ環境では完全に正常に動作しています。モバイルブラウザでは、ページ全体を覆う真っ黒な画面が表示されます。

  2. 現在の症状(未解決)
    ● デスクトップ: 完全に機能しており、追跡も正常、視覚的な問題はありません。
    ● モバイル(テストしたすべてのブラウザ — Android Chrome、iOS): ページは読み込まれ、Discourse の実際のコンテンツが DOM の下層に構造的に正しく存在していることは確認済みですが、真っ黒なレイヤーがビュアポート全体を視覚的に覆っています。
    ● Chrome DevTools のモバイルエミュレーション(Samsung Galaxy S20 Ultra プロファイル)で確認したところ、Discourse の Ember アプリが正しく起動していることが判明しました。これは Discourse の JS/ブートストラップ失敗ではありません。完全に機能しているページの何かが上塗りされている状態です。

  3. 試行したことの完全なタイムライン

    詳細は添付資料を参照してください。

    zoho-salesiq-mobile-issue-discourse-support.pdf (10.1 KB)

これについては聞いたことがありませんが、私たちのプラグインの一つですか? Meta 上のそのプラグインのページへのリンクを共有してもらえますか? もし私たちのものではない場合(そうではないと思いますが)、そのプラグインの開発者にこの問題を報告する必要があります。

「busy」ステータスが期待通りに動作していないのだと思います。これを見たことはありますか? https://help.zoho.com/portal/en/community/topic/how-to-disable-chat-window-in-salesiq 。これはあなたがやりたいことを説明しているように見えます。

これはカスタム CSS で簡単に解決できる可能性があります。あなたのフォーラムにはアクセスできませんが、ページを検査して黒いオーバーレイを見つけ、それを display:none に設定してみてはいかがでしょうか?

こんにちは @chapoi … お返事ありがとうございます!参考までに、私はコードを書かないので、Claude と DiscourseHelper を組み合わせてあらゆる修正を試みました。複数のカスタム CSS ハックも含めてです。しかし、何も効きませんでした。(追伸:Claude に試行錯誤の内容をすべてドキュメント化してもらい、それは私の最初の投稿に添付した PDF に入っています。

とはいえ、あなたがリンクを共有してくれた SalesIQ の変更については、私としては気づいていませんでした。 これはもしかすると、まさに解決策になるかもしれません。(編集:その記事は9年前のものであることに気づきました)参考までに、埋め込み用のスクリプトの新しいコピーを取得したとき(そして先ほどトラッキング専用のコードを検索したとき)、そのオプションは見かけませんでした… ただし、私はそれを意識して探してはいませんでした。もう少し詳しく調べて、結果を報告します。 もし時間があれば、私が添付したドキュメントをざっと見てもらえれば、私がこれを自力で修正するためにどれほど必死に試行錯誤したかがよくわかると思います。ただ… 正直に言えば… 私には DOM が何かもわかりません。:melting_face:

あらゆる方法を試しましたが、モバイルでの動作がうまくいきません。スクリプトをCommonスロットからデスクトップアプリに移しました。現在はデスクトップのトラッキングは機能していますが、モバイルのトラッキングは機能していません。

興味深いことに、イタリアから私の管理エリアにアクセスしている人がいるようです。管理権限を持っているのは私だけです。あなたのプロフィール写真から推測すると、おそらくあなたが私のネットワークにアクセスしているのだと思います。そうでしょうか?

以下のスクリーンショットでは、2 = 私の管理アカウント、3 = 私のテストアカウント、1 = イタリアから私のサイトにアクセスしている不明な管理者です。ビッグブラザーが見張っています。:wink:

イタリアのあの人は@daxでした…今ユーザーリストに表示されています。問題の解決に何かお手伝いできることがあれば、お知らせください。

そう、私です。あなたが送ってくれたチケットを確認していました。

先ほど、あなたから届いたメールに返信しました。

ありがとうございます。返信しました。… @chapoi さんやこの記事を読んでいる方への補足ですが、誤ってスマートフォンを横向きにしたところ、サイトは正常に表示されました。縦向きでのみ問題が発生しています。参考になれば幸いです!

Zoho は、縦長ビューポートで汎用の .mobile-view クラスを display: none に設定するレスポンシブな CSS ルールを読み込みます。Discourse もルート <html> 要素に mobile-view を適用しているため、Zoho のルールが意図せず文書全体を非表示にしてしまいます。デバイスを横長に回転させると、ビューポートが適用対象のブレークポイントの外に移り、サイトが再び表示されるようになります。

Zoho の CSS は、現在使用されているものではなく、以下のようにそのウィジェットに限定されるべきです:

.zsiq-container .mobile-view {
  display: none;
}

.mobile-view {
  display: none;
}

ただし、使用されているテーマコンポーネントで以下のようにルールを上書きしたので、すべて正常に動作しています:

html.mobile-view {
  display: block !important;
}

ありがとう。あなたは本当にすごいね!すべて正常に追跡されているよ。