iOSで表示に不具合

こんにちは

iOS では背景画像の固定（「ページと一緒にスクロール」をオフ）ができないことがわかりました。

これを回避するために iOS の場合のみ、背景画像の固定を解除する（下記 CSS）ことで対応してもらえないでしょうか？

@supports ( -webkit-touch-callout: none ) {
	body, body.custom-background {
		background-attachment: scroll;
	}
}

前レスの方法による対策を行ったバージョン2.0.6をリリースしました。こちらで対応してもらえませんか？

速い対応感謝いたします。

ワードプレスの追加CSSのところに、いただいたCSSをコピペし、プラグインもバージョン2.0.6にアップデートしました。

Safariで見たところ（プライベートモードも含めて）これまでと変化がないのですが、他にすべきことはあるのでしょうか。

コード関係に詳しくないため申し訳ありませんが、ご教授の程お願いいたします。

すみません、プラグインの不具合がありました。修正したバージョン2.0.7をリリースしましたので、プラグインを更新しブラウザのキャッシュを削除して試してみてください。

対応ありがとうございます！

ただ、バージョンアップ後、キャッシュ削除して確認しましたが、まだ思うように表示されません。。。

繰り返しにチェックを入れると、その設定通り、思い通りの画像サイズで、画像が繰り返し表示されていることは確認しました。

ですが、目指すところとしてはAndoroidと同じように、スマホのスクリーンと同じサイズで背景として固定したい（画像もその比率に近いサイズのものを選んでいます）のですが、これは難しいでしょうか？

下記コードではどうでしょうか？

テーマの functionc.php に、

function my_post_background_style( $style, $image_src, $background ) {
	if ( $background['attachment'] ) {
		return $style;
	}

	$url        = esc_url( $image_src );
	$size       = in_array( $background['size'], array( 'auto', 'contain', 'cover' ), true ) ? $background['size'] : 'auto';
	$repeat     = $background['repeat'] ? 'repeat' : 'no-repeat';
	$position_x = ( in_array( $background['position_x'], array( 'left', 'center', 'right' ), true ) ) ? $background['position_x'] : 'left';
	$position_y = ( in_array( $background['position_y'], array( 'top', 'center', 'bottom' ), true ) ) ? $background['position_y'] : 'top';

	$style = <<<STYLE
body.custom-background {
	background-image: none;
}
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100vw;
	height: 100vh;
	background-image: url("$url");
	background-repeat: $repeat;
	-webkit-background-size: $size;
	background-size: $size;
	background-position: $position_x $position_y;
}
STYLE;

    return $style;
}
add_filter( 'xo_post_background_style', 'my_post_background_style', 10, 3 );

（根本的には iOS のバグ（こちらを参照）なので修正されればいいのですが……）

iOSのバグなんですね…

コード書いていただき、本当にありがとうございます！

コピペして確認してみます。少しお時間いただくことになりますが、また報告させていただきます。

コードをfunction.phpにコピペして、Safariで確認したところ、思う通りの背景が設定できていました！完璧です！！

ものすごく嬉しいのですが、何か感謝を形で伝えることはできないのでしょうか？ポイントや応援金など？このコミュニティ自体初めて使ったので、何かあれば教えてください。

今回は本当にありがとうございました。

ちなみにfunction.phpに入れた最後のコードは、どんな内容なのでしょうか？画像の設置の条件を細かく指示しているようには見えるのですが。。。お手間にならない範囲で教えていただけると助かります。

解決したようで良かったです。

ポイントや応援金など？このコミュニティ自体初めて使ったので、何かあれば教えてください。

プラグインよっては寄付できる方法（プラグインページの「このプラグインに寄付」ボタン）が用意されているものもあるのですが、このプラグインは現在ありません。将来、大幅に機能追加したら用意したいと思います。予定はありませんが……。使ってもらえるだけでありがたいです。(^^?

ちなみにfunction.phpに入れた最後のコードは、どんな内容なのでしょうか？

背景画像の固定（background-attachment: fixed）時に表示がおかしくなるので、背景画像の固定時に別の方法（position: fixed）にしています。ある程度（背景色などは省略しています）、背景設定の内容（$background）を反映させています。CSS に関しては短いのでググって（すみません）みてください。

機能追加、期待しています。その時は忘れずに寄付させていただきます！

解説もありがとうございます。参考にして知識を深めたいと思います。

今回はありがとうございました。今後ともよろしくお願いします。

• This reply was modified 1 year, 5 months ago by ktmediaservice.