NLP
iPhoneのSafariでWordPress(STINGER)背景画像が固定されない。。。

iPhoneのSafariで背景画像固定が効かない

safari以外ではバッチリ!

 

 

そうなんです、、、

いろいろいじったからかなぁ。。。

 

これ、無視したいなぁ。。。笑

なのだが、クライアントがなんとiphoneなんだよね。

当然無視はできないので対策をお勉強!

 

最初はバグ!?

 

って思ってCSSを一生懸命調べたのですが

きちんと背景画像の位置を指定しているしな。。。

 

と思っていたのですが

やはり、iphoneで見たら固定されない。。。

 

 

これはやばーい!

 

ということで今、奮闘しています。

 

 

頭から煙が出てきています(笑)

 

背景画像の設定記述

どこにあるんだ。。。

 

解析ではここにあることはわかっているんだけどな

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3

解決できたらこちらの記事に追加しますね。

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時間かかった。。。

プログラマーじゃないからなぁ。。。

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう

おすすめの記事