前提・実現したいこと
vue.jsにてspa(pwa)を構築しており、
その中でtwitterのような画像と本文を投稿できる簡易的な投稿機能を実装しようとしています。
該当のソースコード
html
1<!-- vue.jsの単一コンポーネントの該当部分のhtmlです。 2fontawesomeのカメラアイコンをタッチするとファイル選択ダイアログが表示されるようにしています。 --> 3<label for="imageUploader"> 4 <i class="fas fa-camera"> 5 <input @change="selectedFile" type="file" accept="image/*" name="file" id="imageUploader" style="display:none;"> 6</label>
発生している問題・エラーメッセージ
上記のアプリケーションをホーム画面に追加した状態から起動した際に、画像を選択するファイル選択のダイアログの反応が悪く、カメラアイコンを1.5秒ほどタッチしないとファイル選択ダイアログが起動しない状況になります。
manifest.jsonにて、display:standaloneを指定しているのですが、そこに起因していると考えていますが、対策が分からずという状況で、お力添えをお願いしたいです。
※追記
Android端末でホームに追加→上記操作試したところ正常に動作しました。
iOSの特有の問題のようです。
試したこと
①labelタグの除去&javascript経由でclickイベントの実行→変わらず
html
1<!-- labelタグの除去 --> 2<i @click="fileSelect" class="fas fa-camera"> 3<input @change="selectedFile" type="file" accept="image/*" name="file" id="imageUploader" style="display:none;">
javascript
1fileSelect(){ 2 const inputFileSelect = document.getElementById('imageUploader') 3 inputFileSelect.click() 4}
②イベントの発火チェック→通常のタッチでカウントは増えていくがファイルダイアログは起動せず→clickイベント系は正常に動作している。
javascript
1fileSelect(){ 2 const inputFileSelect = document.getElementById('imageUploader') 3 inputFileSelect.click() 4 this.counter++; //プロパティを適当に設定して反応を確認 5}
補足情報(FW/ツールのバージョンなど)
vue 2.5.17
iOS 12.0
Safari 604.1
あなたの回答
tips
プレビュー