背景：无法在移动浏览器上缩放 [英] background:cover not scaling on mobile browsers

问题描述

我正在开发的项目是一个分为几个部分的1页网站，第一部分是应用了背景图片的标头广告。我的目标是让这个图像响应调整大小，所以我设置 background-size 属性为盖

The project I'm working on is a 1 page website that is split up into sections, the first section is the masthead with a background image applied to it. My goal is to make this image responsive on resize, so I set the background-size property to cover

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

When scaling the viewport on a desktop browser, the image scales accordingly. However on mobile clients (tested on iOS 7 and Andriod Froyo/Kitkat) the image seems to stay at it's full width/height, becoming very pixelated and distorted.

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

一开始我认为问题在于每个部分左边/右边有-500％的边距和500％的边距（我使用这个创建全宽度部分，同时将内容保留在网格中）。我拿出这个代码，仍然得到相同的结果。如果任何人有任何线索，我的错误，这将是伟大的。

At first I thought the problem was with the -500% margin and 500% padding I had on the left/right of each section (I'm using this to create full width sections while keeping the content inside my grid). I took out this code and was still getting the same result. If anyone has any clues as to what I'm doing wrong, that'd be great.

更新

我一直在做更多的调查，由于图片大小限制而成为iOS问题（阅读更多在这里）和换出我相当大的1.2mb图像与500k gif。但问题仍然存在。

I've been doing more investigating and thought that this might be an iOS issue due to image size limits (Read More Here) and swapped out my rather large 1.2mb image with a 500k gif. The problem however, persists.

更新2

尚未找到完整解决方案，找到了一个我很高兴的解决方案。

Haven't found a full solution yet, but I have found a fix I'm happy with.

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

In my global styles I have these background properties set on .masthead section:

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：

On my first media query break point I apply these styles to .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;
}

给我的结果在移动，我正在寻找，但只有当 background-attachment 属性未设置为固定。这对于我来说不是太大的交易，因为固定的背景在移动设备上不能真正工作。

contain seems to give me the result on mobile that I'm looking for, but only if the background-attachment property is not set to fixed. This wasn't too big of a trade off for me since fixed backgrounds don't really work properly on mobile devices anyway.

推荐答案

我终于找到了这个问题的解决方案，我在这里发布它希望它会帮助某人

I have finally found a solution to this problem, and I'm posting it here in hopes that it'll help someone else.

虽然我最初认为我的问题是 background-size 没有正确缩放，更多与 background-attachment：fixed 相关。具有这两个属性导致背景缩放不佳，并且也不会在用户滚动时修复图像（Kind失去/失去的情况）。

While I originally thought my problem was that background-size was not scaling properly, it seems the issue was more related to background-attachment: fixed Having both of these properties caused the background to scale poorly, and also would not fix the image in place while the user scrolls (Kind of a lose/lose situation).

此方法有一些合理的回溯。我首先在Four Kitchens博客上了解它，并且信任Chris Ruppel解释这个技术。 （原文）

There are some legitimate draw backs to this method. I first learned about it on the Four Kitchens blog, and credit goes to Chris Ruppel for explaining this technique. (Original Article)

为什么不起作用

Chris深入了解为什么 position：fixed 不适用于移动浏览器中的背景元素与浏览器需要做的重绘量以及如何对性能产生负面影响有关。因此， background-attachment 属性在移动浏览器上无法正常工作。

Chris goes into a lot more detail about why position: fixed doesn't work on background elements in mobile browsers has to do with the amount of repaints the browser would need to do and how that negatively affects performance. Because of this, the background-attachment property doesn't work as expected on mobile browsers.

解决方案

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

The basic idea behind this technique is to set the background image as you normally would, but instead of setting the attachment property to fixed, you add position:fixed to the div itself, effectively fixing it to the top/left of the body element.

基本上与 will-change 属性相结合，为移动设备创建一个新的绘画层，以绘制背景做同样的事情translateZ（0）），没有chugging /跳跃（你经常得到的结果，当尝试这样做与Javascript）。请阅读链接的文章，了解有关此技巧的详情。

Essentially combining this with the will-change property creates a new paint layer for mobile devices to draw the background (essentially does the same thing as translateZ(0)), without chugging/jumping (the result you often get when trying to do this with Javascript). Please read the linked article for more info on this technique.

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已经在父元素上设置了溢出和位置属性，但从我的研究，他们没有效果。相对定位不适用于固定元件，也不会溢出。

I should mention that while Chris has set overflow and position properties on the parent element, from my research they have no effect. Relative positioning does not apply to fixed elements, and neither does overflow.

缺点

这项技术在我的测试中正常运作，您可能不想使用它的几个原因：

This technique works correctly on my testing, but there are a few reasons why you may not want to use it:

• 没有溢出控制：因为这个div是相对于视口固定的， overflow：hidden 没有效果。这意味着你不能剪切图像以适合在其容器div内，它将始终填充整个背景。这通常不会在实际中出现问题，因为< section class =masthead> 下的任何其他内容都会显示在图片上下的其余内容）。但是，如果由于某种原因，您需要剪切/裁剪背景图片，以便不占用整个背景，您可以尝试使用剪辑属性。 查看此问题的第二个答案

• No overflow control: Because this div is fixed relative to the viewport, overflow:hidden has no effect. That means you can't "clip" the image to fit inside its container div, it will always fill the entire background. This usually won't be a problem in practice, as any other content under <section class="masthead"> will be on top of the image (effectively hiding it under the rest of the content). However if for some reason you do need to cut/crop your background image as to not take up the entire background, you could try using the clip property. See the second answer to this question

在滚动（Safari）上显示：这纯粹是一种美感，但由于Safari中的弹跳滚动顶部或底部的页面，背景将窥视。

Visible on scroll (Safari): This is purely an aesthetic thing, but because of the "bouncy" scrolling in Safari, if you scroll past the top or bottom of a page, the background will peep through. This doesn't happen in Chrome, just Safari.

每页一张图片：其他人可能已经知道了，因为 div 这个背景图像是附加到相对于视口是固定的（在x：0，y：0），我找不到一种方法添加多个固定图像作为1页的一部分。问题是，它将简单地堆叠在（或后面取决于它的z索引）之前的图像。将其 top 值设置为硬编码像素/ rem / em值将会将其移动，但是没有办法知道它需要向下移动多少距离与其合成的内容（特别是在响应的网站，其中内容高度从未固定）。

One image per page: Someone else might have figured this out, but because the div this background image is attached to is fixed relative to the viewport (at x:0, y:0), I can't find a way to add multiple fixed images as part of 1 page. The issue being that it will simply stack on top of (or behind depending on it's z-index) the previous image. Setting its top value to a hard coded pixel/rem/em value will move it down, but there is no way to know exactly how far it needs to move down to line up with its assosicated content (especially on a responsive site, where content height is never fixed).

种类的黑客：虽然这完全有效，我甚至在目前的项目中使用它。它确实感觉hacky。 background-attachment：fixed 觉得应该是最好的解决方案，如果它的工作。

Kind of hacky: While this totally works, and I'm even using it on a current project I'm working on. It does feel hacky. background-attachment: fixed feels like it should be the best solution to this, if it worked.

这篇关于背景：无法在移动浏览器上缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！