Chromeでボタンの背景色を白(fff)にできないときの対処法

NES.cssを開発しているときに、Chromeだけなぜかボタンの背景色（background-color）に白(#fff)が指定できないことに気づいた。FirefoxやSafariだと問題ない。

ボタンのbackground-colorに色を指定しているのになぜか#fffのときだけ他の色（グレー）になる謎現象に悩まされてる。reset.css使ったときは問題なかったんだけどなんでだろ？ pic.twitter.com/17WuDz18lb

— ダーシノ (@bc_rikko) 2018年11月25日

いろいろ実験したので、ボタンの背景色を白するための対処法をまとめる。

Chromeでボタンの背景色を白にする方法

対処法1: 限りなく白に近い色にする

この問題は白（#fff）のときだけ再現する。そのため限りなく白に近い色（たとえば#fffffeなど）にすると解消される。

<button style="background-color: #fff">#ffffff</button>
<button style="background-color: #fffffe">#fffffe</button>

対処法2: -webkit-appearance: noneを指定する

NES.cssではこちらの方法を採用した。reboot.cssを使用しているのだが、-webkit-appearance: button;になっているのでそれを上書きした。

<button style="
  background-color: #fff;
  -webkit-appearance: none;
">#ffffff</button>

謎いですねｗ ちなみにこんな感じになりました！（jsFiddleのURLを貼りたかったのですが、スパム扱いされツイートできなかったので画像で失礼します） pic.twitter.com/nx3wYxFzUZ

— ダーシノ (@bc_rikko) 2018年11月25日

原因はChromeの仕様？バグ？

ボタンの背景色を白にできない原因はChromeにある。（仕様なのかバグなのかは定かではない）

たとえばページの背景色を白以外（たとえば黒など）にした場合は、-webkit-appearance: none;をしなくてもボタンの背景色を白くできる。

またちょっとでもページズームをすると白くなる。

白くなった！！！！！！！！！！！！！！！！！！！！
`zoom: 1.0000001;` でも白くなった...

— 🐕 Hiroki Tani ☕ (@hiloki) 2018年11月27日

Chromeはたまにこういうバグなのか、新仕様を先取りして実装したのかわからないことがあるので、Chromeだけ開発している人は注意したほうが良いだろう。



以上

written by @bc_rikko