iOSのsafariでinput[type="file"]を見た目をいい感じにしたかった

Nuxt.jsで組んでいたアプリをiOS端末でデバッグしてみたらいい感じに動かなかったので、いろいろ探ってみて分かったことをメモ。

問題の起きたコード

とりあえずinputを非表示（display: none）にして、inputの代わりのボタンをクリックしたときに、非表示のinput要素をクリックするイベントを発火させるやつ。

See the Pen image select(included bug) by keyakko (@keyakko) on CodePen.

PCでは動く。
safariではいい感じに動かない。

よくわからない動き

問題のコードでも、画像選択の画面は出てくるんですよね。
ただ、選択後にonchangeのイベントが発火されない。（alertがでない)

試しにinput要素を表示して、inputの要素をクリックしたら当たり前のようにイベントは発火されてalertは出る。
JS経由でクリックさせて、ファイル選択させてもイベント発火されないのはなんで...？

対処

とりあえず今回の対処。

1. buttonとinputの要素の順番を変える

codepenにコード書いててたまたま気づいた。完全に知識不足。

See the Pen image select(fix pattern1) by keyakko (@keyakko) on CodePen.

<label>
  <button>アップロード</button>
  <input type="file" />
</label>

2. ボタンの上に透明にしたinput要素を乗せる

Buefyのソースが参考に。

See the Pen image select(fix pattern2) by keyakko (@keyakko) on CodePen.

さいごに

いろいろ探すと、display:noneはちゃんと動かないからwidth:0; height:0; overflow:hidden;で対応しようねって出たりするけど、それではいい感じにならなかった。
最終的には対処方法の2番に行き着いた感じ。

話はそれるけど、iPhoneのsafariのコンソールが見たいのにsafariの開発タブにデバイスがすんなり表示されないの自分だけ...？
そっちでも苦しめられた...（ここを参考にWi-FiとBluetoothをオフにしたらなぜかちょっと表示されたけど）