
iPhoneのSafariで背景画像固定が効かない
safari以外ではバッチリ!
そうなんです、、、
いろいろいじったからかなぁ。。。
これ、無視したいなぁ。。。笑
なのだが、クライアントがなんとiphoneなんだよね。
当然無視はできないので対策をお勉強!
最初はバグ!?
って思ってCSSを一生懸命調べたのですが
きちんと背景画像の位置を指定しているしな。。。
と思っていたのですが
やはり、iphoneで見たら固定されない。。。
これはやばーい!
ということで今、奮闘しています。
頭から煙が出てきています(笑)
背景画像の設定記述
どこにあるんだ。。。
解析ではここにあることはわかっているんだけどな
解決できたらこちらの記事に追加しますね。
iPhoneのSafariで背景画像の position: fixed; が効かないという事らしい。
調べていくうちにわかった!
STINGERPLUS: テーマのための関数 (functions.php)
このファイルに注目!
// カスタム背景
$custom_bgcolor_defaults = array(
'default-color' => '#f2f2f2',
);
add_theme_support( 'custom-background', $custom_bgcolor_defaults );
この部分がカスタム背景を有効化する箇所
<?php // カスタム背景を有効化
add_theme_support( 'custom-background' );
?>
STINGERPLUS: テーマヘッダー (header.php)
つぎにこのファイル
<?php include_once( "analyticstracking.php" ) //アナリティクスコード ?>
<?php get_template_part( 'st-ogp' ); //OGP設定 ?>
</head>
<body <?php body_class(); ?> >
<div id="wrapper" class="<?php st_wrap_class(); ?>">
<header id="<?php st_head_class(); ?>">
わかりやすいように前後も掲載したが
カスタム背景で指定された値は custom-background というクラスに出力されるようです。
このクラスはbodyに以下のテンプレートタグを使うことで自動的に付与されます。
ということで、そのタグがこれ
<body <?php body_class(); ?> >
と、ここまでわかった!
根本的な解決にはなっていないけど
STINGERPLUS: スタイルシート (style.css)
body.custom-background {
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
z-index: -1;
}
これをスタイルシートに追加するとなんだかスクロールはするんだけど
途中で途切れることは解決した(笑
safari限定で記事と一緒にスクロールする。
あとはカスタマイズで背景画像固定に設定しているから
しっかりと固定されている。
当然safari以外ではしっかりと固定
safariのみスクロールでカバー
これまでで6時間かかった。。。
プログラマーじゃないからなぁ。。。