どうもー、ついにニートから社会復帰したset0gut1です。職場に入って数日目に体験した怪奇現象を、小噺としてひとつ。
mission: ボタンがチカチカするのを直す
新しい会社に入って数日目、仕事の雰囲気に慣れるため、ちょっと軽いタスクでもいただこうかなーと思って選んだのが ボタンがチカチカするのを直す みたいなチケットでした。で、 iPhone 実機で問題のボタンを押すと、たしかになんかチカチカしてる。
↑こんな感じで、1回タップするとボタン部分の背景色が、約1秒間で gray → white → gray → white → gray みたいな感じに変化してました。
hover で色が変わるんだろうけど、一瞬 hover が途切れる挙動になってるのかな...とか思いながら、とりあえず色を確認してみる。
！？！？！？wwwwww
おかしい... iPhone 実機で見ると、タップした瞬間はどう見ても「グレー背景に白ボタン！」なのに、グレー背景の部分も #fff ですって... どうなっている... 何も分からないよ... 僕がニートしてたのが悪いんですか...？
なにを言っとるんだコイツはって思われる方が多いと思うので、デモを置いておきます。 iPhone 実機で見てみてください。
brightness filter と transition
問題のチカチカするボタンの css 部分がこんな感じ。hover 中に brightness が上がるというのを、 transition でアニメーションしてます。
.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回、発生する。
will-change を使う（力技）
brightness filter 使うの怪しいからやめない？っていうのがまぁ普通かとは思います。そもそもデザインの意図としては「hover で枠線とテキストの色が青から水色になって欲しい」というもので、「#fff よりも輝いてみせる！」とは誰も思ってないですし。
でも最小の変更でチカチカだけ直せないかなー...と思いつつウェブを探して見つけたのがこちらの Qiita 記事。
僕が持ってたタスクに似てる状況に対応されてて、ヒントをいただきました。これを踏まえて、僕がいま直面している状況を整理すると
- ボタンは transition 中だけ「超白」になる
- transition してない時は brightness filter が当たっていても #fff より白くはならない
- css の
will-change: filterで、この手の問題が直ることがあるらしい（←new）
それで書いたのが次の css です。 :hover の中に will-change: filter; の一行だけ追加。
.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; の追加で直りました。デモを置いておきます。
デモにある二つのボタンのうち、上が will-change なし、下が will-change あり です。正直、全然理解できてないんですけど、 will-change が当たっていると、おそらくマシン的には transition 中と同じ状況になるんでしょう。絵にするとこんな感じのイメージ。
謎は謎のままですけど、ボタンがチカチカするのを直すというミッションは、最小手順でクリアすることができたと考えることにします。勝ったッ！第3部完！
後日談
僕の修正内容の良し悪しはともかくとして、現象として面白がってくれた先輩がいまして、その先輩が数日後にシェアしてくれた github リポジトリがこれです。
#fff よりも白い色が出る現象は世間的にも時々、話題にあがるらしく、このリポジトリは僕が見つけたのとは違う方法で「超白」を出しているんですけど、曰く
- HDR対応ブラウザが見せる謎挙動
- これが起きる正確な理由はまだ知られていない
ということで、世間的にもよく分かっていないということが分かりました。
CSS trick/bug to display a brighter white by exploiting browsers' HDR capability and Apple's EDR system
↑リポジトリの description、物騒すぎるでしょ...。
僕はもうほんと、新しい職場にはやく慣れたくて、ちょーっと ボタンがチカチカするのを直す っていう簡単そうなタスクを取っただけなのに、またすぐこういうのに出会ってしまう...
ただいま、社会