html - 背景 :cover not scaling on mobile browsers

Question

我正在开发的元素是一个单页网站，分为几个部分，第一个部分是 header ，并应用了背景图像。我的目标是使该图像在调整大小时响应，因此我将 background-size 属性设置为 cover

在桌面浏览器上缩放视口(viewport)时，图像也会相应缩放。然而，在移动客户端(在 iOS 7 和 Andriod Froyo/Kitkat 上测试)上，图像似乎保持其完整宽度/高度，变得非常像素化和扭曲。

示例:http://www.bardiadoust.ca

起初我认为问题出在每个部分左侧/右侧的 -500% 边距和 500% 填充(我使用它来创建全宽部分，同时将内容保留在网格内)。我拿出这段代码，仍然得到相同的结果。如果有人知道我做错了什么，那就太好了。

更新

我一直在做更多的调查，并认为这可能是由于图像大小限制( Read More Here )引起的 iOS 问题，并用 500k gif 替换了我相当大的 1.2mb 图像。然而问题仍然存在。

更新2

尚未找到完整的解决方案，但我已经找到了令我满意的修复方法。

在我的全局样式中，我在 .masthead 部分设置了这些背景属性:

background: $tangerine;

background:
  linear-gradient(
    rgba(232,85,4, .84),
    rgba(232,85,4, .84)
),

url("../images/pano2.png") no-repeat center center;
   -webkit-background-attachment: fixed;
   -moz-background-attachment: fixed;
   -o-background-attachment: fixed;
   -ms-backgroudn-attachment: fixed;
   background-attachment: fixed;

   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;

在我的第一个媒体查询断点上，我将这些样式应用于 .masthead:

@media only screen and (max-width: 959px){
    -webkit-background-attachment: scroll;
    -moz-background-attachment: scroll;
    -o-background-attachment: scroll;
    -ms-backgroudn-attachment: scroll;
    background-attachment: scroll;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    -o-background-size: contain;
    background-size: contain;
}

contain 似乎在移动设备上为我提供了我正在寻找的结果，但前提是 background-attachment 属性未设置为 fixed。这对我来说并不是太大的权衡，因为固定背景无论如何都不能在移动设备上正常工作。

Answer 1

我终于找到了解决这个问题的方法，我将其发布在这里，希望对其他人有帮助。

虽然我最初认为我的问题是background-size无法正确缩放，看来问题与 background-attachment: fixed 更相关拥有这两个属性会导致背景缩放效果不佳，并且在用户滚动时也无法将图像固定到位(有点丢失/丢失的情况)。

这种方法有一些合理的缺点。我第一次了解到它是在四个厨房博客上，克里斯·鲁佩尔 (Chris Ruppel) 解释了这项技术。 (Original Article)

为什么不起作用

克里斯更详细地解释了原因 position: fixed不适用于移动浏览器中的背景元素，这与浏览器需要执行的重绘量以及这对性能的负面影响有关。正因为如此，background-attachment属性在移动浏览器上无法按预期工作。

解决方案

此技术背后的基本思想是像平常一样设置背景图像，但不是将附件属性设置为 fixed ，您添加 position:fixed到 div 本身，有效地将其固定到 body 元素的顶部/左侧。

本质上将其与 will-change 结合起来属性为移动设备创建一个新的绘制层来绘制背景(本质上与translateZ(0) 做相同的事情)，而无需突突/跳跃(尝试使用 Javascript 执行此操作时经常得到的结果) )。请阅读链接的文章以获取有关此技术的更多信息。

HTML:

<section class="masthead">
   ...
</section>

CSS:

.masthead {
   overflow: hidden; // added for pseudo-element
   position: relative; // added for pseudo-element

// Fixed-position background image
   &::before {
      content: ' ';
      position: fixed; // instead of background-attachment
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: url('/img/front/strategy.jpg') no-repeat center center;
      background-size: cover;
      will-change: transform; // creates a new paint layer
      z-index: -1; //ensures image is behind everything else
   }
}

我应该提到，虽然 Chris 设置了 overflow和position父元素上的属性，根据我的研究，它们没有影响。相对定位不适用于固定元素，也不会溢出。

缺点

此技术在我的测试中工作正常，但有几个原因可能导致您不想使用它:

• 无溢出控制:因为此 div 相对于视口(viewport)是固定的，overflow:hidden没有影响。这意味着您无法“剪切”图像以适合其容器 div，它始终会填充整个背景。这在实践中通常不会成为问题，就像 <section class="masthead"> 下的任何其他内容一样。将位于图像的顶部(有效地将其隐藏在其余内容的下面)。但是，如果由于某种原因您确实需要剪切/裁剪背景图像以免占用整个背景，您可以尝试使用 clip属性(property)。 See the second answer to this question

• 滚动可见(Safari):这纯粹是为了美观，但由于 Safari 中的“flex ”滚动，如果您滚动超过页面的顶部或底部，背景将会透过。这种情况在 Chrome 中不会发生，只会在 Safari 中发生。

• 每页一个图像:其他人可能已经发现了这一点，但因为 div附加的背景图像相对于视口(viewport)是固定的(位于 x:0, y:0)，我找不到将多个固定图像添加为一页的一部分的方法。问题是它只会堆叠在前一个图像的顶部(或后面，具体取决于它的 z 索引)。设置其 top将值设置为硬编码的像素/rem/em 值会将其向下移动，但无法确切知道它需要向下移动多远才能与其相关内容对齐(尤其是在响应式网站上，其中内容高度永远不会固定的)。

• 有点 hacky:虽然这完全有效，而且我什至在我当前正在进行的元素中使用它。确实感觉很hacky。 background-attachment: fixed感觉如果有效的话，这应该是最好的解决方案。