バナーロゴの上の青い線

おそらくここ24時間ほどで発生したと思われます。バナーロゴの上に青い線が表示されています…

最初にフォーラムでこれに気づきましたが、メタでも再現可能です。Edgeブラウザを使用している場合にのみ表示されます。FirefoxやChromeでは表示されません。また、モバイルブラウザでのみ表示されます。Edgeのデスクトップ版では表示されません。

昨日最新のDiscourseコードにアップグレードしましたが、それにすぐに表示されるようになったのか、あるいはEdgeのアップデートがここ24時間以内に行われたのかは分かりません。

編集:モバイルブラウザでデスクトップサイトとしてページを表示しても、まだ表示されています。予想はしていましたが、思いついたので試す価値はありました。

ページが非常に高速に読み込まれるため、完了したバーしか見たことがありません。ChromeまたはFirefoxとの互換性がないと仮定しますか?

実際、もう少し考えてみましたが、バーは画面幅の約45%にしかならず、テーマコンポーネントの例では画面全体に広がります。
待ってもバーは45%以上に進みません。これは、Edgeでページが完全に読み込まれていないということでしょうか?

編集:
ページを更新するとスライダーが表示されます。青いバーよりも細く、青いバーはスライダーが100%に達した後に表示されます。

「いいね!」 1

こんにちは :waving_hand:

その行は「メインコンテンツにスキップ」リンクの下部にあります。Edge のフォントサイズを変更すると、この問題を再現できます。

100% のデフォルトフォントサイズでは問題ないようです。

しかし、フォントサイズを 110% 以上に大きくすると、「メインコンテンツにスキップ」ボタンがヘッダーの上に表示されます。これは、ブラウザのフォントサイズ変更機能が要素を尊重していないためと思われます…




ページをリロードすると、すべて元に戻るようです。

リロード前 200%

リロード後

しかし、ブラウザの機能の代わりに、Discourse にはテキストサイズを変更する機能があり、デバイスのネイティブのアクセシビリティ機能も使用できます。これらは要素を尊重します。

Discourse でテキストサイズを変更する:

テキストサイズを変更できる インターフェースページ に移動してください。

「いいね!」 3

フォントサイズを大きくするとボタンは表示されますが、私の携帯電話では100%で青い線が表示されます。それが消えるようにするには、サイズを90%に下げるか、Discourseでフォントサイズを「小さく」に設定する必要があります。私はfont sizeを大きくする必要がある年齢なので、小さくするのは実際には選択肢ではありません。

しかし、隠されたボタンの目的が何なのか不思議です。ほとんどの人が(モバイルEdgeでない場合や「適切な」フォントサイズの場合)それを見ることができないのであれば、あまり役に立つUXアイテムではないのではないでしょうか?

それはアクセシビリティ上の理由からです。スクリーンリーダーはそのボタンを見ることができます。

「いいね!」 2

ああ、なるほど。

何が変わったか何か分かりますか? 数日前にはなかった青い線が、EdgeやDiscourse、または私の携帯電話のフォントサイズを変更しても現れないようになりました。最新のDiscourseコミットを適用した後に現れたようですが、100%確信はありません。