iOS表示 背景画像のカクつき(拡大縮小)を解消したい

実現したいこと

スクロールした際に背景画像が拡大縮小されてしまう表示を解消したい

発生している問題・分からないこと

iOSでも動くよう「background-attachment: fixed;」を使わずパララックスを作っているのですが、
iPadで表示確認をしたところ下にスクロールした際に背景画像がカクッと拡大されるようになってしまっていました。(上にスクロールすると逆に縮小されます)

PCで見てもこの動きは現れず、iPadで表示した際のみの問題です。
スマホ表示はパララックスしないよう「position: static;」で上書きしており、上記のような動きは見られません。

パララックスの動きはそのままで、この拡大縮小の表示を解消したいです、、。

該当のソースコード

html

1<div class="slide is-active">2 <div class="slide-content">3 <div class="caption">4 <div class="slide-title">5 <h2 class="slide-title__heading">タイトル</h2>6 </div>7 8 <p class="slide-text">テキストテキストテキストテキスト</p>9 10 <a class="slide-button kv__btn" href="#"><span class="kv__btn--text">ボタン</span><span class="kv__btn--arrow"></span></a>11 </div><!-- .caption -->12 </div><!-- .slide-content -->13 14 <div class="image-container">15 <div class="kv__bg kv__bg01"></div>16 </div><!-- .image_container -->17</div><!-- .slide -->

css

1.slideshow .slide{2 display: none;3 overflow: hidden;4 position: absolute;5 top: 0;6 left: 0;7 width: 100%;8 height: 100%;9 z-index: 1;10 opacity: 1;11 transition: opacity 0.3s ease;12}13 14.slideshow .slide .caption{15 position: absolute;16 top: 50%;17 width: 725px;18}19 20.slideshow .slide .image-container{21 width: 100%;22 height: 100%;23 clip-path: inset(0);24}25 26.slideshow .slide .image-container::before{27 content: "";28 display: block;29 position: absolute;30 top: 0;31 left: 0;32 width: 100%;33 height: 100%;34 background: rgba(0, 0, 0, 0.5);35}36 37.kv__bg{38 content:"";39 position:fixed;40 top:0;41 left:0;42 width:100%;43 height:100%;44 -webkit-background-size: cover;45 background-size: cover;46 background-position: center center;47 z-index:-1;48 49/* 以下3行試したこと */50 backface-visibility: hidden;51 -webkit-backface-visibility: hidden;52 overflow: hidden;53}54 55.slideshow .slide .kv__bg01{56 background-image: url(../images/kv_bg01.jpg);57}

試したこと・調べたこと

上記の詳細・結果

ネットで検索したところ、下記を追記するといいと見つけたので試しましたが解消しませんでした。
(「 .image-container」に追記しても解消されずでした。)

backface-visibility: hidden;
-webkit-backface-visibility: hidden;
overflow: hidden;

補足

特になし

コメントを投稿

0 コメント