今回起こったこと
何故か、HSLで色を指定した時に、指定した色と違う色も表示される...
１日無駄にしたため、戒めとして記事を残そうと思う。
症状
Remixでshadcn-uiを使って色々と試していた時に不思議な症状が出た。
1.何故か背景色が2色で表示される色があった。
2.何故かbodyの中身を消すと直る
3.Chromeでは発生して、Safariでは発生しない
考察と原因
今回、CSS変数をHSLで初めて使ったため、使い方が悪いのかと思ったが、Chromeでは発生して、Safariでは発生しないため、CSSの設定やプロジェクトのConfigの問題ではなさそうだと推測。
Configやプロジェクトの作り直し、その他色々と試したけれど、明確に差が出る原因を特定できなかった。
一晩明けて、落ち着いてもう一度考え直してみた。
Chromeのみで発生するため、Chromeの設定の可能性が高いと思い調べたところ、Chromeが使うカラープロパティという項目があることを知った。
これにより、Chromeのカラープロパティの設定を変えたところ症状が直った。
Chromeがモニターのカラープロパティをデフォルトで使用しているため、モニター側の問題だと判断できた。
対処方法
Macの設定から、モニターのカラープロパティをdisplay P3に変更したところ改善した。
持っているモニターとMacの相性の問題なのか、デフォルトのカラープロパティでは正常に表示されなかった。
まとめ
そんなこんなで、色々と原因を探していたところ、１日も無駄にしてしまった。
まさか、モニターのカラープロパティが原因で、ページ上の背景が部分的に変わるなんて思わないじゃん...
昨今、ゲーミングモニターなどで部分的に色味が調整されているモニターもあるため、創作活動時はカラープロパティも確認していこうと学びを得た。