background-size: 仅在桌面 Safari 中覆盖不垂直对齐答案

【问题标题】：background-size: cover not vertically aligned only in desktop Safaribackground-size: 仅在桌面 Safari 中覆盖不垂直对齐
【发布时间】：2015-08-11 04:46:16
【问题描述】：

我的页面主体上有一个背景图像，它应该垂直和水平居中并覆盖画布。

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

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

这个直播网址是：http://moonios.com

我已尝试删除溢出：无以及删除页面的其他内容，但问题仍然存在。

如果您有任何建议或可以确认此错误，我将不胜感激。谢谢！查理

更新：做了更多的工作来解决这个问题。用网格构建了这个新页面：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 中禁用这种效果？

【问题讨论】：

标签： css safari background-size

【解决方案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%;
}

希望对你有帮助。

【讨论】：

谢谢，我已经尝试过了，但看起来它实际上可能是 Safari 的半透明问题。在主帖中查看我的更新。

【解决方案2】：

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

【讨论】：