css で以下の条件を満たすページを作ります。
background-image
: 背景画像をカバーとして設置background-position-y
: bottom
に設定background-attachment
: fixed
に設定background-size
: cover
に設定border-radius
: 角丸になるように指定(例: 15px
)このページを、 Chrome 系のブラウザで表示させます。例えば以下。
87.0.4280.66
87.0.664.47
3.4.2066.106
Firefox では発生しませんでした。 Safari は未検証です。
以上の条件を満たす状態でページをスクロールします。すると……
以下にデモページを用意しました。
こんなページをデモで作成しました。このページをスクロールすると……
……画像の一部分、サンプルだと「Vampire」の文字が縦に引き伸ばされました。
開発者ツールを画面下に表示させて横長の画面サイズにするとより顕著に現象が確認できます。
さすがにこれは……ということで、抑制する方法を検証しました。
現象は、上述のように Chrome でも画面サイズによって出たり出なかったりします。例えば、開発者ツールを下ではなく右に表示させると現象が消えた、といった具合に。
とはいえ、レスポンシブなサイトで画面サイズを限定するのは難しいと思います。
そこで開発者ツールでcssの適用を付け外しした結果、以下のいずれか1つを実施すれば現象が発生しなくなることが確認できました。
background-position-y
: 指定しない( top
に設定する)
center
は画像コンテンツの高さ等によって現象が出てしまうこともありましたbackground-attachment
: fixed
以外に設定するbackground-size
: cover
以外に設定するborder-radius
: 指定しない( 0
に設定する)裏を返せば、これら4つの条件を同時に満たさない限りは現象は発生しない、ということになります。
以上から、もしかすると Chrome(Chromium) のバグの可能性もあるのでは、と思っているのですが、検索しても全然ヒットしないので正直よく分かりません。
いずれにしても、「こんな現象がある」ということでメモしておきます。
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは?
コメント