背景大小：仅在桌面 Safari 中封面不垂直对齐

Question

我的页面主体上有一张背景图片，它应该垂直和水平居中并覆盖 canvas。

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

在 Chrome/Firefox 和所有移动浏览器中，图像垂直和水平居中并覆盖 canvas。在桌面版 Safari 中，图像略低于垂直中心。我是不是做错了什么或者这可能是浏览器错误？

直播url是：http://moonios.com

我已经尝试删除溢出：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 导航栏中的半透明效果（虽然我已经关闭了它）。我相信 Safari 正在考虑 body 区域来覆盖顶部导航栏，这会影响我的垂直居中，因为页面内容不会以这种方式考虑。有没有办法从 dom?

中禁用该效果

Answer 1

尝试仅使用这些属性；

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

应该可以。

如果没有，为什么不把图片做成div然后用z-index做背景呢？这比 body.

上的背景图片更容易居中

除此之外尝试：

background-position: 0 100px;/*use a pixel value that will center it*/ 或者如果您将 body 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%;
}

希望对您有所帮助。

Answer 2

在尝试破解浏览器并使用特殊 CSS 定位 Safari 来解决此问题后，我检查了 El Capitan，此行为已得到纠正。所以我打算放弃这个问题。

背景大小：仅在桌面 Safari 中封面不垂直对齐

background-size: cover not vertically aligned only in desktop Safari

css

safari

background-size