Foundation テンプレート(v2026.6)との互換性の問題

みなさん、こんにちは。

最近、Discourse のインスタンスを v2026.6 にアップグレードしたところ、現在使用している Foundation テンプレートで予期しない問題が発生しています。

こちらでもいくつかの確認作業(基本テスト、ログの検査、他のコンポーネントの無効化、カラーパレットの確認など)を行いました。しかし、現時点では問題の正確な原因を特定できず、修正方法も見つかりません。

このアップデート以降、同じテンプレートで同様の問題に遭遇された方はいますか?調査のヒント、v2026.6 のコアにおける特定の変更点、あるいは提案などがあれば教えていただけますか?

ご助力やアイデアは大歓迎です。

ご返信をお待ちしております!

アップデート前:

アップデート後:

現在、Modernizing the Foundation theme に記載の変更が予定されており、おそらく現在デフォルトで有効になっています。
現時点では、/admin/config/upcoming-changes に移動し、この変更に対して「誰も」を選択することで、変更を元に戻すことができると思います。

ただし、この変更が恒久的になると、この方法は機能しなくなります。その場合、新しいデフォルトを上書きするカスタムテーマコンポーネントが必要になります。

どのような問題や違いに困っていますか?

お二人、こんにちは。

まず初めのご指摘をいただき、ありがとうございます。

@NateDhaliwal

1 - 検索バーの上と下に余白が追加されました

2 - ボールド(太字)だったフォントがセミボールドに変更されました

3 - テキストのコントラストが低下し、わずかにぼやけが生じています。

テーマの CSS に以下のコードを追加することで、この問題を修正できます:

body {
    --webkit-font-smoothing: auto;
}

このプロパティが何をするのかについての詳細は、こちらで確認できます: A Modern CSS Reset • Josh W. Comeau

2018 年にリリースされた macOS Mojave では、オペレーティングシステム全体でサブピクセルアンチエイリアシングが無効化されました。おそらく、最新のハードウェアでは害の方が大きいと判断したのでしょう。

混乱を招くことに、Chrome や Safari などの macOS ブラウザでは、デフォルトでサブピクセルアンチエイリアシングが使用され続けています。-webkit-font-smoothingantialiased に設定することで、これを明示的に無効にする必要があります。

違いを示すために… 左が --webkit-font-smoothing: auto;、右が --webkit-font-smoothing: antialiased; です。

macOS はデフォルトでテキストをより濃くレンダリングしますが、これはブラウザ内でのみ適用され、OS の他の部分には適用されません… antialiased に設定することで、他のオペレーティングシステムでのテキストレンダリングに近づきます… Windows の Chrome ではこの CSS は適用されず、テキストはデフォルトでこのように表示されます: