［速報］chrome最新版でfixed系指定のバグがあるかもしれない件
※この記事は速報（2018/6/15現在）の為検証は不十分です。
こんにちわ、ma-ya’s CREATE［まーやずくりえいと］です。
今日、自分のサイトを何気なく見ていたらとあるバグに気付きました。
該当部分のコード変更は長らくしていないし、数日前までは正常表示だったので一瞬焦りました汗。
chrome最新版でのみbackground-attachment: fixed;している背景が表示されない
バグの内容はというと、background-attachment: fixed;指定の背景画像が表示されないというもの。
調べてみると問題があるのはchromeのみ。
サイト構築は主にchromeで検証しながら行っていたので制作段階で気付かないはずはない。
ふと気づくとchromeのインターフェースがアップデートにより、数日前のそれと若干変わってました。
やってみた検証
- background-attachment: fixed;を外すとchrome最新版でも画像自体は表示される
- 最新版の firefox / edge / IE は問題なし。
- バージョンダウンしたchromeでは正常表示
うーん最新版chromeのバグなのか。
-webkit-backface-visibility:hidden; でハック
結果から言うと、背景指定している要素に下記どちらかを指定することで一応解決できます。
-webkit-backface-visibility:hidden; //ハック① -webkit-transform: translate3d(0,0,0); //ハック②
上記指定はアニメーションのカクつきなどを解消するためのハックとして使われることが多いかと思います。
GPUに処理を優先させることでぬるぬる滑らかなアニメーション実装が可能というわけです。
ただ、実例は少ないですがfixed系の値指定をした要素の表示がうまくいかない場合のハックとしても使用されるケースもある模様。
参考サイトは -webkit-transform: translate3d(0,0,0); を使用していましたが、ぼくのサイトの場合はそちらの指定だと別の個所で不具合が出るので上記「ハック①」を使用しています。
特定条件下で発生する可能性大
background-attachment: fixed;のサンプルを載せているサイト等を見て回った結果、バグはあったりなかったりでした。
その為特定条件下でのバグだと思うのですが、残念ながら今のところ特定には至っていません。
周辺のCSSやJSでの処理が関係している可能性も大いにありますが、不具合が出ていないようでしたら特に気にする必要はないかと思いますmm
