Error messages and icons render black on black in Android WebView 106

オープン 初心者向け
  • 何か問題がありますか？
#735 コメント 0 件 リアクション 0 件 担当者 0 名 GitHub で見る

まだ誰も着手していません。

評価

難易度
2/5
見積もり時間
1〜3時間
初心者へのやさしさ
68/100
issue の種類
バグ
明瞭さ
おおむね明確
活発さ
活発
技術スタック
css
領域
frontend

調査の方向性

まず、メディアエラー画面のメッセージと SVG のスタイル設定をたどり、次にプロジェクトの CSS ユーティリティで text-gray-400 がどのように定義されているかを調べます。報告によると、Android WebView 106 では OKLCH はサポートされていませんが、RGB はサポートされています。その画面で互換性のあるテキスト色とアイコン色が適用されることを確認し、エラー状態を再現して、黒い背景に対して両方が読みやすいことを確かめます。

索引モデルが issue の本文から書いたものです。

説明

bug
Version

v1.0.39.0

Deployment Method

Docker

Description

When a photo fails to load the image area is black even though the DOM contains an error message and error icon. The clock/date and progress overlay is still visible, making this look like a blank photo instead of an error state.

I inspected the live error view over USB. Both its message wrapper and SVG have rgb(0, 0, 0) against the black background. text-gray-400 utility uses an OKLCH colour that this WebView does not support.

This comes from debuggin my original issue with #733.

Reproduction
  1. Run the official Android app in WebView mode using WebView 106.0.5249.126.
  2. Display the viewer's media-error state. In my case it happened after a failed fetch which is tracked in #733
  3. Inspect the error view without refreshing it. Its message/icon exist in the DOM, but the media area looks black while the clock/date is visible.
  4. On this device the error text/icon are black and OKLCH support is false in this specific webview version
Expectations

Readable error text

Configuration
Logs
live DOM inspection and read-only `getComputedStyle` / `CSS.supports` queries


Error SVG computed colour: `rgb(0, 0, 0)`
Error-message DIV computed colour: `rgb(0, 0, 0)`
Root/body computed text colour: `rgb(0, 0, 0)`
Root computed background: `rgb(0, 0, 0)`
--color-gray-400` value: `oklch(70.7% 0.022 261.325)`
CSS.supports('color', 'oklch(70.7% .022 261.325)')` | `false`
CSS.supports('color', 'rgb(156, 163, 175)')` | `true`

The served stylesheet contains:


--color-gray-400: oklch(70.7% .022 261.325);

.text-gray-400 {
  color: var(--color-gray-400);
}
Pre-Submission Checklist

  • This is a bug report and not a feature request

  • I have provided all of the required information to reproduce the bug (config, logs, etc.)

  • I have checked for related issues and checked the documentation

主要言語
C#
スター
2.4k
フォーク
121
平均マージ
18日 20時間
マージ済み PR（30日）
1

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

immichFrame/ImmichFrame のほかの issue

immichFrame/ImmichFrame の issue をすべて見る

似ている issue

C# の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。