iOS上の固定位置の背景

私は上にコンテンツが浮かぶフルイメージ固定の背景を持つウェブサイトを持っています。デスクトップブラウザでは正常に動作しますが、固定された背景がiPadsや他のタブレットでスクロールしてしまいます。これはよくある問題だと思われますが、私はこのウェブサイトを横断しました。これはiPad上でさえも背景が固定されているようです。iOS上の固定位置の背景

http://confitdemo.wordpress.com/

彼らはそれをオフに引いているかの任意の手掛かり？私は試しました：

#content-wrapper.posts-page { 
background-attachment: fixed !important; 
background-clip: border-box; 
background-color: transparent; 
background-image: url("image path"); 
background-origin: padding-box; 
background-position: right top; 
background-repeat: no-repeat; 
background-size: cover; 
}

（これはファイヤーバグからコピーされているため、省略形ではありません）。

しかし運がなかった。誰でも私を正しい方向に向ける？

出典

2013-04-15 JeremyE

私はこのテーブルが背景のサイズを変更する可能性が最も高いと考えています。したがって、この宣言を追加すると、おそらく大丈夫です。

background-attachment: fixed !important; 
background-size: cover !important;

編集：

私は考えることができる唯一の他の理由このdoesntの仕事は、IOSが何らかの形であなたがしている何をすべきか、コンテンツと同じ大きさであることを、本体の大きさのサイズを変更しなければならないということであればここでは、正しいプロパティ

#fixebg{ 
background: url(image.jpg) top; 
height:100%; 
width:100%; 
position:fixed; 
}

とbodyタグ内のdivを作成することは似ソリューションです：

How can I set fixed position Background image in jquery mobile for iPhone app using Phonegap

編集 - 2：

あなたがチェックすることができますフィドルを追加しました：

http://jsfiddle.net/uZRXH/3/

そしてここでは、iPadでそれを試してみるためのリンクです：

http://fiddle.jshell.net/uZRXH/3/show

出典

2013-04-15 06:47:24 Breezer

申し訳ありませんが、私は完全なコードが含まれている必要があります。コンテンツはdivタグの内側に追加された場合は、以下のようなコンテンツやページが非スクロール可能でした。元の投稿を編集して完全なコードを追加しました。 – JeremyE

@JeremyEあなたのサイトへのリンクを私に送ってもらえますか？私はデモを作ってくれて、それは私のためにはうまくいきます。 – Breezer

は元の投稿へのデモリンクを追加しました。通常のブラウザでは正常に動作しますが、iPadでは背景がスクロールします。 – JeremyE

は動作しないが、モバイルブラウザでは、スクロールコンテンツの後ろに固定された<div>が作成されるということを利用して、このWebサイトはモバイルブラウザでのトリックを利用している。

出典

2014-05-16 22:37:14 rev087

大丈夫なので、私はすでにそのサイトを構築しています。固定されたバックグラウンドを持つ部分は、divに固定してdivを固定した場合にはうんざりします。だから私はこれを書いて、それはiPhone上で動作します。その後、

私はこれが使いやすかったが、ビューポートの上部にオールウェイズだ何がどうなる固定ヘッダを持っている...

 if (//on mobile) { 
      var headerH, headerH2, viewportH, sliderH, res 
      viewportH = $(window).height(), 
      headerH2 = 80 //correction when measuring with fixed header, 
      $topheader = $('.top_header'), 
      $slider = $('#twinslider') //the element to check for if in viewport; 
      function getH() { 
       headerH = $topheader.offset().top; 
       sliderH = $slider.offset().top; 
       res = (((headerH - headerH2) - sliderH) + viewportH)/viewportH; 
       if (res > 0 && res < 1.4) { 
        return res; // thats truthy and a value for further calculation 
       } else { 
        return false; 
       } 
      } 
      getH(); 

      setInterval(function(){ // before i listened to scroll, but this was better for performance 
       if (getH()) {//if slider is in viewport 
        $slider.find('li').css({ //the element to set the background pos for 
         'background-position': 'center ' + res * 50 + '%' 
        }, 100); 

       }     
      }, 25); 

     }

と「固定背景を与える要素を与えますあなたはバックグラウンドポジションに移行し、あなたは完了です。しかし、それは良いことではありません....そして、よりよい解決策があるように感じます...しかし、これはうまくいきます。

出典

2015-03-25 09:48:10

1）あなたは、リンク・イメージを持っている場合z-index: -1;はブリーザの第二のアプローチに追加する必要がありそうでない場合は、画像が

2）背景の後ろに（隠れて保管されている）同じアプローチで、私は残りの前にdiv要素を入れていました

<body> <div id="fixedbg"></div>  </body>

出典

2017-01-11 06:08:35 Rafael

iOS上の固定位置の背景

答えて

関連する問題