SP端末の表示で要素を浮かせるのは怖い | 全国個人事業主支援協会

COLUMN コラム

SP端末の表示で要素を浮かせるのは怖い

要素を浮かせると言うのは、cssのfloatや一部のposition指定のことです。

ことの経緯は直近のUIバグにて、

SP × 浮いている要素

に対しての問題が続いた事です。

最初に気づいたのは、actionに対してcssClassの適用が、

妙に遅かった事です。

これはどうも、-webkit-overflow-scrolling(※) が原因だったようで、

厳密にはこれをコンディショナルに付けたり外したりする事でした。

※浮いている要素はSPの場合、ぬるぬるしたスクロールが行われません

それをiOSで実現してくれるstyleになります

仮定ですが、

問題のstyleの適用は思った以上にブラウザに負担をかけており、

適用に時間がかかるのではないか、と思っております。

さて、かといってぬるぬるスクロールがSPで使えないのはかなり不親切です。

(ちなみにAndroidに関しては、-webkit-overflow-scrollongに該当するものすらありません)

結果として、問題のソースをposition: staticにすることで

ブラウザの自然なスクロールに頼る手段をとりました。

言葉では簡単ですが、結構な規模の改修です。

これからSP用の表示をこさえる方はぜひその辺も気にしてみてください。

PCで開発しきってから実機で確認したら〜・・。

なんてことにならないように！

フリーでSEをしています。バックエンドから逃げて、現在はフロントエンドメインでお仕事中。