html - 为什么 iOS Safari(和 iOS Chrome)显示背景图片的方式与其他浏览器不同？

Question

我正在构建一个非常基本的站点，其中标题有一个“固定”(CSS) 图像，用于实现“视差”效果。 然而，在 iOS 设备上，这张背景图像呈现得很奇怪，与几乎所有其他浏览器/移动设备相比，显示了一个非常放大的图像版本。

我已经尝试使用所有的 background-* 属性，但我无法让它们中的任何一个在我的生活中正常工作!我不知道是否有我应该寻找的 -webkit-background-*，但理论上我的实现相当简单/标准!

样式:

#header {
    padding: 3em 0;
    text-align: center;
    width: calc(100% + 10em);
    margin: 0 -5em;
    height: 500px;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

#header .content {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}

#header .content .logo {
    display: block;
    margin: 0 auto 1.5em;
    max-width: 75px;
    z-index: 2;
    position: relative;
}

#header p {
    font-size: 1.25em;
    letter-spacing: -.025em;
    margin: 0 0 2em;
    position: relative;
    z-index: 2;
}

#header:after {
    content: "";
    background-image: url(/static/media/16fcfe6…/will-stocks-profile.322ff34c.jpeg);
    opacity: .35;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: absolute;
    z-index: 0;
    background-attachment: fixed;
    background-position: 100% 33%;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-filter: blur(3px);
    filter: blur(3px);
}

相关元素的 HTML 标记:

<header id="header">
  <div class="content">
    <img src="/assets/images/Logo.png" class="logo" alt="Logo">
    <p>Tech reviewer, IT professional &amp; avid blogger.</p>
  </div>
</header>

访问 site (目前处于“测试状态”)在任何其他移动设备/平板电脑(甚至使用 Chrome DevTools 设备)上，图像显示完全符合预期。但是在 iOS 设备上访问它，你会看到只有一小部分图像可见(旋转到横向，您会看到更多)- 看起来图像被放大了？

Answer 1

我现在包含了一个媒体查询，它通过使用 background-attachment: scroll; 而不是 fixed 来解决图像大小问题 - 但是这样做会消除“视差” "对移动设备的影响(据我所知可以认为是昂贵的):

#header:after {
  content: "";
  background-image: url(./../images/will-stocks-profile.jpeg);
  opacity: 0.35;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: 0;
  background-position: 100% 33%;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(3px);
}

@media screen and (max-width: 999px) {
  #header:after {
    background-attachment: scroll;
  }
}

@media screen and (min-width: 1000px) {
  #header:after {
    background-attachment: fixed;
  }
}

从理论上讲，构建一个小的 Javascript 片段以将图像固定在顶部应该是一项简单的工作，但是我不知道这将如何与 background-image 一起使用在 :after 伪...而且 JS 滚动事件监听器肯定会比使用 CSS 更昂贵吗？