絵文字の行の高さの調整 - フィードバック

実験一時停止 :pause_button:

このトピックは、絵文字がもはや「行の高さ」に影響を与えず、トピック投稿、メッセージ、チャットでユーザーのテキストサイズ設定を尊重する進行中の実験に関するフィードバック、主に UX 関連の問題に焦点を当てて収集することを目的としています。
たとえば、例はここにあります… :slight_smile:

最小のユーザーテキストサイズでの実験なし(最も劇的な違い):

^ 「たとえば、」の前に改行があるように見えますが、実際にはありません。

なぜこれはバグ修正ではなく実験なのですか?

そうかもしれませんが、さまざまなデバイス、ブラウザ、オペレーティングシステムに潜在的に隠れた問題が存在する可能性があります。たとえば、Safari は、特定の数字と font-size の組み合わせで transform: scale(x) のスタイリングプロパティをぼやけてレンダリングし、webkit の代替は grow ですが、このプロパティは、より広く採用されているプロパティとは異なり、行の高さにわずかなスペースを追加します。このトピックは、サポートを採用する前に、バグをすべて捕捉するための網を投げかけるためのものです。

「いいね!」 3

素晴らしい!:slight_smile: 細部が違いを生みますね。

いくつかのプラットフォームやブラウザでテストしましたが、今のところ問題なさそうです!

タイトルの絵文字にも同様のロジックを適用するのはどうでしょうか?
管理者がテーマをカスタマイズしてフォントサイズを大きくする可能性があると思います。

chrome_1xAGEUEi88
chrome_GmCmJoVJ6c

「いいね!」 1

これは @tynaut さんに関連しているように思えます

image

ユーザーのステータススタイルはこの影響を受けましたか?

「いいね!」 2

確認しました。これはチャットで特に修正されました。

ただし、投稿/メッセージについては、そのセレクターの修正を探します。動的な <li></li> (例として) の絵文字や、特定のものを除いて任意のマークアップをキャプチャするのに十分な幅が必要です。

「いいね!」 3

この実験は現在一時停止/無効化されています 2024-01-02T06:00:00Z 、当面の間、transform: scale(x) プロパティに関連する Safari のレンダリングの問題を診断するためです。絵文字はランダムなケースでぼやけて表示される可能性があり、ある投稿では鮮明に表示されても、次の投稿では再現可能なパターンなしにぼやけて表示される可能性があります。

一般的に、レンダリングは Safari で考慮されていましたが、この不整合は回避が難しいため、この実験には、実装を進め、Safari の WebKit バージョンを引き続きサポートするために、より一貫した修正が必要になります。Safari 専用の WebKit の代替 grow プロパティを再実装することを検討しています。これは行の高さの一部を消費しますが、これは軽減できます。

「いいね!」 3