インフラエンジニアを募集中です。詳細はこちら君の名は・・・iOSでスクロールすると、表示される謎の隙間スマホサイト制作ブラウザyanagimachi2018.12.04WordPressの5.0が出そうで出ないので、ドキドキしているyanagimachiです。「Gutenberg」エディタはプラグインで何度か使ってみたのですが、まだ使い慣れていないので精進したいところです。表題のアレ、先日公開したバシャログ。メンバー所属のシーブレインWebソリューション事業部のサイトでも起こっていますね。ページの一番下でグイグイ上にスワイプすると領域外っぽい白い(bodyの背景の色)ところが表示されてしまいます。※ちなみにAndroid/Chromeだと下からもやのようなものが出ます。これは何?上下のスクロール領域の境界に到達したときに、「もうこれ以上スクロールができない」ことを表すインタラクション(下の場合はバウンスエフェクト)のようです。CSSやJSでは何か設定できるの?overscroll-behaviorというCSSのプロパティがあるのですが、まだiOSには対応していません。Android/Chromeでは以下のCSSを追加すると、もやが消えました。none;}上記のCSSでは、他にも最上部スクロールでの更新も無くなりました。タッチデバイスで起きるこの現象ですが、そういう理由だったんですね。iOSではCSSのみで対応できませんが、対応されたら上手く使いたいものです。小ネタ)JavaScriptfujihara2018.07.19はてブ【レスポンシブ対応】見出し+文章をスマホ時のみアコーディオンにするスマホサイト制作kouraku2017.08.03はてブ【レスポンシブ対応】複数のブロックに分かれたリストを1つにまとめるスマホサイト制作kouraku2016.09.16はてブバシャログ。Web制作スタッフによるブログです。「現場で使えるテクニック」をモットーに、Web制作全般についてお届けします。