なんぞこれ #fffより 白い色（iPhone css hack, HDR）

どうもー、ついにニートから社会復帰したset0gut1です。職場に入って数日目に体験した怪奇現象を、小噺としてひとつ。

（そうは見えないかもしれませんが、この記事は[LabBaseテックカレンダー Advent Calendar 2024](https://qiita.com/advent-calendar/2024/labbase)の4日目の記事です。）

https://qiita.com/advent-calendar/2024/labbase

## mission: ボタンがチカチカするのを直す

新しい会社に入って数日目、仕事の雰囲気に慣れるため、ちょっと軽いタスクでもいただこうかなーと思って選んだのが `ボタンがチカチカするのを直す` みたいなチケットでした。で、 iPhone 実機で問題のボタンを押すと、たしかになんかチカチカしてる。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235355/01613f00-fc48-d4d9-a618-022322a25977.png)


↑こんな感じで、1回タップするとボタン部分の背景色が、約1秒間で `gray → white → gray → white → gray` みたいな感じに変化してました。

hover で色が変わるんだろうけど、一瞬 hover が途切れる挙動になってるのかな...とか思いながら、とりあえず色を確認してみる。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235355/f627b848-422c-ee98-ab8b-264c93d0dc4a.png)

！？！？！？wwwwww

おかしい... iPhone 実機で見ると、タップした瞬間はどう見ても「グレー背景に白ボタン！」なのに、グレー背景の部分も #fff ですって... どうなっている... 何も分からないよ... 僕がニートしてたのが悪いんですか...？

なにを言っとるんだコイツはって思われる方が多いと思うので、デモを置いておきます。 iPhone 実機で見てみてください。

[demo: ultra-white-button](https://set0gut1.github.io/ultra-white-button/)

https://set0gut1.github.io/ultra-white-button/

## brightness filter と transition

問題のチカチカするボタンの css 部分がこんな感じ。hover 中に brightness が上がるというのを、 transition でアニメーションしてます。

```css
.button-a {
  /* width とか height とか（略） */
  
  border: solid 1px blue;
  color: blue;
  background-color: #fff;

  transition: filter 0.5s ease;
}

.button-a:hover {
  filter: brightness(1.5);
}
```

色の変化を観察してみたんですけど、下の図みたいな感じになってました。ボタンを触ってない時は背景と同じ色、つまり `#FFFFFF` で、 transition のアニメーション中だけ「超白」になり、 transition が終わって普通の hover 状態になると `#FFFFFF` に戻る。この挙動が hover の開始と終了のときの2回、発生する。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235355/c7051a59-d6a7-d731-84ab-3df435d57e82.png)

## will-change を使う（力技）

brightness filter 使うの怪しいからやめない？っていうのがまぁ普通かとは思います。そもそもデザインの意図としては「hover で枠線とテキストの色が青から水色になって欲しい」というもので、「#fff よりも輝いてみせる！」とは誰も思ってないですし。

でも最小の変更でチカチカだけ直せないかなー...と思いつつウェブを探して見つけたのがこちらの Qiita 記事。

https://qiita.com/benjuwan/items/0690795f4494dc68dd75

僕が持ってたタスクに似てる状況に対応されてて、ヒントをいただきました。これを踏まえて、僕がいま直面している状況を整理すると

- ボタンは transition 中だけ「超白」になる
- transition してない時は brightness filter が当たっていても #fff より白くはならない
- css の `will-change: filter` で、この手の問題が直ることがあるらしい（←new）

それで書いたのが次の css です。 :hover の中に `will-change: filter;` の一行だけ追加。

```css
.button-b {
  /* width とか height とか（略） */
  
  border: solid 1px blue;
  color: blue;
  background-color: #fff;

  transition: filter 0.5s ease;
}

.button-b:hover {
  filter: brightness(1.5);
  will-change: filter; /* ← 追加行 */
}
```

## な、直りましたァァ

上記の css の `will-change: filter;` の追加で直りました。デモを置いておきます。

[demo: ultra-white-button](https://set0gut1.github.io/ultra-white-button/
)

https://set0gut1.github.io/ultra-white-button/

デモにある二つのボタンのうち、上が `will-change なし`、下が `will-change あり` です。正直、全然理解できてないんですけど、 will-change が当たっていると、おそらくマシン的には transition 中と同じ状況になるんでしょう。絵にするとこんな感じのイメージ。

![](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/235355/3467cb41-4159-c2af-2199-d35af46a4d58.png)

謎は謎のままですけど、`ボタンがチカチカするのを直す`というミッションは、最小手順でクリアすることができたと考えることにします。**勝ったッ！第3部完！**

## 後日談

僕の修正内容の良し悪しはともかくとして、現象として面白がってくれた先輩がいまして、その先輩が数日後にシェアしてくれた github リポジトリがこれです。

https://github.com/kiding/wanna-see-a-whiter-white

#fff よりも白い色が出る現象は世間的にも時々、話題にあがるらしく、このリポジトリは僕が見つけたのとは違う方法で「超白」を出しているんですけど、曰く

- HDR video と css hack の組み合わせによって HDR 対応ブラウザが HDR モードに移行し、テキストカラーとして「超白」が出るようになる
- これが起きる正確な理由はまだ知られていない

ということで、世間的にもよく分かっていないということが分かりました。僕が今回書いてる方法だと HDR video 無しで css 単体で「超白」が出てるのは新しいのかも知れない。

にしても、このリポジトリの description、物騒すぎるでしょ...↓

> CSS trick/bug to display a brighter white by exploiting browsers' HDR capability and Apple's EDR system

僕はもうほんと、新しい職場にはやく慣れたくて、ちょーっと `ボタンがチカチカするのを直す` っていう簡単そうなタスクを取っただけなのに、またすぐこういうのに出会ってしまう...

ただいま、社会

https://qiita.com/advent-calendar/2024/labbase