1494157 - background-size: cover differs from Chrome/Safari (with background-attachment: fixed, on mobile viewports)

Status: NEW

(Core :: Layout: Images, Video, and HTML Frames, defect, P5)

Description

[Karl Dubost💡 :karlcow]

This is a spin-off of https://webcompat.com/issues/19093


Steps to reproduce:

0. Using Firefox Nightly 64 and Chrome Canary 71 on Android
1. Go to  http://veganism.co.in/
2. Check the background image set on the body

Actual:
* on Firefox the veggies are visible, the image is indeed covering the area.
* on Chrome, the image seems to be blown out, veggies are not visible.
* on Safari, same behavior than Chrome.

Expected:
Not sure. While Firefox rendering seems to be more visually appealing, the rendering of Chrome and Safari seem to be more correct by spec.

The specification says:
> Scale the image, while preserving its intrinsic aspect ratio 
> (if any), to the smallest size such that both its width and 
> its height can completely cover the background positioning area.  
https://drafts.csswg.org/css-backgrounds-3/#valdef-background-size-cover

The background image is defined by:

body.custom-background {
    background-image: url(http://veganism.co.in/wp-content/uploads/2018/06/lf01-OCT-vegetarianism.jpg);
    background-position: left top;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}


The image itself is 1200px by 676px
The body element size is around 360px by 10 000px

So indeed if we want to cover the full area of the body height, we would need to make the image

10000 / 676 =~ 14.8 times and indeed it will look very blur.


Note that responsive design tools on both Chrome and Firefox gives the same result than Firefox (aka not blown out). There is something specific about mobile viewport it seems.

Comment 1

[David Baron :dbaron:]

This may be related to https://bugs.chromium.org/p/chromium/issues/detail?id=521555 documenting that Chrome on Android disables background-attachment: fixed.

Comment 2

[David Baron :dbaron:]

Also, on this particular site, the behavior on Firefox for Android (and on all desktop browsers) seems *better* than the behavior on Chrome for Android, so I don't think there's any evidence here suggesting that we should change our behavior.  Do you know of any sites that depend on the broken behavior?

I'd also note that:

https://drafts.csswg.org/css-backgrounds-3/#valdef-background-size-cover says:
      Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.

and https://drafts.csswg.org/css-backgrounds-3/#background-positioning-area says:
  If the background-attachment value for this image is fixed, then this property has no effect: in this case the background positioning area is the initial containing block [CSS2]. 

and https://drafts.csswg.org/css2/visudet.html#containing-block-details says:
  The containing block in which the root element lives is a rectangle called the initial containing block. For continuous media, it has the dimensions of the viewport and is anchored at the canvas origin; it is the page area for paged media. 

so I think it's clear that the Chrome for Android behavior is incorrect.

Comment 3

[Firefox Bug Husbandry Bot]

Migrating Webcompat whiteboard priorities to project flags. See bug 1547409.

Comment 4

[Firefox Bug Husbandry Bot]

See bug 1547409. Migrating whiteboard priority tags to program flags.