1

ページの本文に、垂直方向と水平方向の中央に配置され、キャンバスを覆う背景画像があります。

  body {
    background: #000;
    overflow: hidden;
    background: url(background_phone_2.jpg) no-repeat center center fixed;
    background-size: cover;
  }

Chrome/Firefox およびすべてのモバイル ブラウザーでは、画像は垂直方向と水平方向の両方で中央に配置され、キャンバスを覆います。デスクトップの Safari では、画像は垂直方向の中央より少し下にあります。私は何か間違ったことをしていますか、それともブラウザのバグでしょうか?

これのライブ URL は次のとおりです: http://moonios.com

ページの他のコンテンツを削除するだけでなく、overflow: none を削除しようとしましたが、問題は解決しません。

何かアドバイスがあれば、またはこのバグを確認できる場合は、よろしくお願いします。ありがとうございました！チャーリー

更新：これを理解するためにもう少し作業を行いました。グリッドを使用してこの新しいページを作成しました: http://whyamicrazytoday.com/safari/

ページ全体の内容は次のとおりです。

<html>
  <head>
    <title>Safari Background Size Bug</title>
    <style>
      body {
        background-image: url(background.png);
        background-repeat: no-repeat;
        background-position: center center;
        background-attachment: fixed;
        background-size: cover;
      }
    </style>
  </head>
  <body>
  </body>
</html>

まだSafariでのみ再現します。

Safari と Chrome

次に、Safari のナビゲーション バーの半透明効果を思い出しました (オフにしてありますが)。ページのコンテンツがそのように考慮されないため、Safari は上部のナビゲーション バーを覆うようにボディ領域を考慮していると思います。dom からその効果を無効にする方法はありますか?

4

2 に答える 2

1

これらのプロパティのみで試してください。 

background-image: url(background_phone_2.jpg);
background-repeat:no-repeat;
background-position: center center;
background-attachment: fixed;

それはうまくいくはずです。

そうでない場合は、div画像でz-indexを作成し、それを背景に使用してみませんか? これは、ボディの背景画像よりも中央に配置する方がはるかに簡単です。

それ以外は試してください：

background-position: 0 100px;/*use a pixel value that will center it*/min-heightもしくは体を100%にしておけば50%でもいいと思います。

body{

    background-repeat:no-repeat;
    background-position: center center;
    background-image:url(background_phone_2.jpg);
    color:#FFF;
    font-family:Arial, Helvetica, sans-serif;
    min-height:100%;
}

お役に立てば幸いです。

于 2015-08-11T06:00:56.270 に答える
0

ブラウザのハッキングを試み、これを修正するために特別な CSS を使用して Safari をターゲットにした後、El Capitan にチェックインしたところ、この動作は修正されました。ということで、この話題は割愛します。

于 2015-08-11T21:31:44.150 に答える