Open Bug 1494157 Opened 2 years ago Updated 11 months ago

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

Categories

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

64 Branch
Unspecified
Android
defect

Tracking

()

Tracking Status
firefox64 --- affected

People

(Reporter: karlcow, Unassigned)

References

()

Details

(Whiteboard: [webcompat] [css])

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.
Flags: webcompat?
Summary: background-size: cover is different in Chrome/Safari and Firefox (on mobile) → background-size: cover differs from Chrome/Safari (with background-attachment: fixed, on mobile viewports)
This may be related to https://bugs.chromium.org/p/chromium/issues/detail?id=521555 documenting that Chrome on Android disables background-attachment: fixed.
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.

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

Webcompat Priority: --- → ?

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

Webcompat Priority: ? → ---
Flags: webcompat?
You need to log in before you can comment on or make changes to this bug.