iOSでfixed要素の背景がツールバーの高さ分 消える件

スマホ(iOS)のバグ?のお話です。
いつもこの問題に直面するのですが、検索しても出てこないので書いてみます。

※2017/01/11時点、検証可能な範囲 iOS8.4 〜 10.2で発生を確認。

モーダルウィンドウなどを実装する時に、ブラウザ全面に背景色を引いたfixed要素を置くことはよくありますよね。
iOSにおいて、ツールバーが一度出た状態からスクロールして、ツールバーが消える時にこの高さ分(よりやや多め) 背景が消えてしまう問題があります。
文章で説明してもよくわからないと思うので、以下をご覧ください。

数秒以内に正しい状態に治るので大きな問題ではないのですが、割と気になります。
解決方法としては、fixed要素には背景をつけず、背景用のabsolute要素を別に配置する、となります。
発生状態のコードと、解決後のコードを解説します。

続きを読む

新年のご挨拶 2017年 – CSSで干支イラストを作ってみた

明けましておめでとうございます。
SKYGUILDの武井です。
旧年中お世話になった皆様、本当にありがとうございました。
おかげさまで、フリーランスとして順調に2年目を過ごしてまいりました。
本年も変わらぬご愛顧の程、よろしくお願い申し上げます。

さて、突然話は変わりますが、
新年一発目のアウトプットを何か作ろう!と思い、CSSイラストに初挑戦しました。

続きを読む