この記事について
| 環境 | iphone（safari）+ CSS |
|---|---|
| 目的 | 長タップしても選択・コピーのポップアップが出ないのを解消 |
| 結果 | 2つのcssファイルに #content が重複していたのが原因。片方を消して解決 |
つまずきポイント要約
- viewport＋タグなし長文＋大きいline-heightの組み合わせで発生していた
- 対症療法はタグを挟むこと。真因はcssの重複定義だった
事象
iphoneのブラウザで文字の選択ができない現象に遭遇。通常文字列を長タップすると選択およびコピーのポップアップが出るが、それがでなくなる。
出なくなる条件。
- タグを含まない文字列が長く続く
- line-heightの値が250%などと大きい
- viewport（スマホサイズの指定）がある
以上3つの条件が揃うとコピーができない。文字列の長さを短くしたり、line-heightの値を小さくするとコピーができるようになる。viewportの指定を外せば、タグを含まない長い文字列でも、line-heightが大きい値でもコピーに支障なし。
現象はiphone5s(iOS9.3.2) と iphone6s(iOS9.3.3) で確認。それぞれの端末で選択できなくなるまでの文字数が違う。この違いが、画面の大きさからか、スペックからか、OSのバージョンからなのかは不明。
対症療法として文字列中の適当な箇所になどのタグを入れるとコピーできるようになる。
原因判明（2016/09/22 追記）
2016/09/22 追記
原因判明。読み込んでいた二つのcssファイルそれぞれに #content があった。一つ消したら不具合もなくなった。
関連：長文が選択しにくい件
