DiscourseコンポーザーとAndroidタブレットのFirefox

数日前から、タブレットのFirefoxアプリでこのフォーラムを使用する際の体験が著しく悪化しました。

Firefox 134.0 (ビルド #2016064983)
Android 14
Galaxy Tab S9 FE

追加情報:私は常に、デスクトップサイトを無効にした状態でFirefoxでDiscourseを使用しています。そうしないと、フォントが大きくなりすぎます。サイズの違いを示すビデオ:

非常に説明しやすい不具合の1つは、AIメニューがコンポーザーの後ろに開くことです。運が良ければ、ほとんどすべてのオプションが見えますが、時には1つしか見えなかったり、まったく見えなかったりします。新しいトピックを作成するときは、後者のケースに該当します。なぜなら、タイトルとカテゴリフィールドもメニューを覆ってしまうからです。



さらに、コンポーザーの高さを調整できなくなりました。全画面表示ボタンとグリップが消えました。これにより、投稿の引用やリンクがはるかに複雑になります。Firefoxの設定で「デスクトップモード」を有効にするとグリップが戻ってきますが、前述したように、すべてが巨大になるため、これは回避策にはなりません。Chromeでは、「デスクトップサイト」の有効/無効に関係なくグリップが表示されます。

フォーラムが更新される前に撮影された比較用のスクリーンショット:


コンポーザーの高さは、プレビューが表示されているかどうかに応じて変化するようになりました。プレビューが表示されている場合、両方向で大きくなります。右側のプレビューを表示/非表示にすることで選択できる、2つの固定された高さオプションです。したがって、プレビューを非表示にすることは、引用の回避策として機能します。


しかし、コンポーザーにわずか3行しか表示されない状態でトピックを作成するのは非常に困難です。プレビューを表示するとコンポーザーのサイズが大きくなるように見えますが、これはテキストフィールドをタップしてキーボードが表示されるまでです。その小さなフィールド内でスクロールして別の段落に移動するのも困難です。

以前は、上部にあるグリップを使用してコンポーザーのサイズを大きくすることができました。


現在、コンポーザーで覆われていない領域が常に上部にあります。

「いいね!」 6

@Moinさん、ありがとうございます。DEV: Improve composer positioning on tablets by pmusaraj · Pull Request #30745 · discourse/discourse · GitHub で、指摘された問題のほとんどが解決されるはずです。

私のテスト用Androidエミュレーターでは、同じAIメニューの問題は見られません。

「いいね!」 1

何も変更に気づきませんでした

「いいね!」 1

Firefoxブラウザで確認していただけますか?この変更は、お使いのデバイスがタブレットデバイスとして正しく検出されることを前提としています。確認する際に、html要素にtablet-deviceクラスがあるかどうか確認できますか?

「いいね!」 1

検出は機能すると思います。

「いいね!」 1

変更に気づきました

これは現在Chromeでも発生しています。約36時間前にアップデートされた私のフォーラムのChromeではまだ動作していますが、ここではAIモーダルがコンポーザーの後ろにあります。

「いいね!」 1

はい、AIドロップダウンの問題がわかりました。zインデックスの問題です。

@keegan @awesomerobot ここで助けが必要です。タブレット、iPad、モバイルでは、コンポーザーが開いているときに mobile-composer の zインデックスを設定しています。これは、特にタブレットのランドスケープビューポートで、コンポーザーがヘッダーの上にレイヤー表示されるようにするためです。

しかし、AIヘルパーメニューはそれよりも低い zインデックス(z("composer", "dropdown") のすぐ上)を持っているため、タブレットではコンポーザーの下に表示されます。これはモバイルには影響しないと思いますが、ボタンはそこでモーダルウィンドウをトリガーします。タブレットでもモーダルを使用するように切り替えるのは理にかなっていますか?

「いいね!」 2

グリッピー要素がタブレットで表示されるはずです。また、コンポーザーはヘッダーの上に展開されるはずです。Chromeでの例:

「いいね!」 1

Chromeでは表示されます。

しかし、Firefoxでは表示されません。

そして、フルスクリーンコンポーザーボタンが両方からなくなりました。新しいトピックを作成する際にタイトルとカテゴリフィールドを隠してくれるので、本文にそのスペースを使えて便利でした。

「いいね!」 1

デスクトップサイトと非デスクトップサイトの違いが見えているのだと思います。FirefoxでデスクトップサイトのトグルをONにすると、以下のようになります。

デスクトップサイトのトグルをOFFにすると、以下のようになります。

これはIMO(私の意見では)期待通りに動作しています。モバイルバージョンにはコンポーザーのリサイズ用グリッピーはありません。これは意図的な決定です。ほとんどのモバイルデバイスにはコンポーザーをリサイズするスペースがありません。

「いいね!」 1

デスクトップモードでDiscourseを使用しています。サイドバーのトグルには電話が表示され、コンポーザーの横にプレビューが表示され、コンポーザーの下部にはGIFや画像を追加するためのボタンがありません。
しかし、前述したように、Firefoxでは「デスクトップサイト」を無効にして使用しています。なぜなら、それ以外の場合はすべてが大きすぎるからです。しかし、それは問題ではないはずです。Chromeでは、「デスクトップサイト」を有効にしても無効にしても、どちらの場合でもコンポーザーのサイズを変更できます。そして、1週間前はFirefoxで問題ありませんでした。

「いいね!」 2

はい、長年の問題を修正するためにコンポーザーの位置にいくつかの変更を加えました。Reply composer broken on firefox mobile - #6 by pmusaraj を参照してください。

はい、Chromeでも同じ結果が得られます。デスクトップサイトの切り替えは効果がありません。この切り替えの有無にかかわらずユーザーエージェントを検査すると、Chromeには微妙な違いがありますが、重要なのはどちらのモードでもユーザーエージェントに「Mobile」が含まれていないことです。

Firefoxでは、デスクトップサイトが無効になっている場合、以下が表示されます。

「いいね!」 1

Discourse でデスクトップサイトを有効にしたときにコンテンツが大きくなる問題を修正できますか?これは Discourse の問題ではないと思われます。他のウェブサイトでも同様の問題が発生するためです。しかし、すべてが大きくなることが、デスクトップサイトを有効にしたくない理由です。

デスクトップサイトが無効の場合:

デスクトップサイトが有効の場合:

注意:デスクトップサイトが有効で、Chrome を使用している場合、フルスクリーンコンポーザーボタンも表示されません。

Discourse は、右下​​にボタンがあるモバイルコンポーザーと、横にプレビューがあるデスクトップコンポーザーのどちらを表示するかをどのように決定しますか? Firefox ではプレビューのデスクトップバージョンが表示されるため、検出は機能しているようです。高さを変更するオプションにも同じ技術を使用できますか?

よくわかりません。FirefoxはChromeとは異なりますよね?これはFirefox固有の問題のように思えますが、アプリの設定があるのでしょうか?

@keegan がこれを修正しました:https://github.com/discourse/discourse-ai/pull/1064。まもなくmetaに反映されるはずです。

「いいね!」 2

Firefox バージョン 137 で修正されました。これで、すべてが大きくなりすぎるのを心配せずにデスクトップサイトを有効にできます。3 か月後、再びコンポーザーを使用できるようになりました。

「いいね!」 7