1360921 - Fixed background image not sized to viewport when using transforms

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Paul]

Attachment: Reproduction of the bug

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:54.0) Gecko/20100101 Firefox/54.0
Build ID: 20170420004021

Steps to reproduce:

The background of a page is set using a background image. The following CSS properties are set:

background-size: cover;
background-attachment: fixed;
background-position: center;

A blurred version of the image is created, and is used in an overlay box that is positioned somewhere on the page. The same CSS properties are set on the overlay box. This creates the illusion of blurring what’s behind the box (since backdrop-filter is not widely available yet).

A transformation was applied to the overlay box using the CSS transform property.


Actual results:

The background image was sized with regard to the overlay box, and not with regard to the viewport. This broke the illusion of blurring the page background image.

For a demo, see the attached repro.html file. Note: this file uses Imgur as an image host, and it contains JavaScript to toggle classes on the overlay box so transforms are added.


Expected results:

The background image should have been sized with regard to the viewport (see https://www.w3.org/TR/css3-background/#the-background-attachment).

It appears that the Blink engine (used in Chrome, Opera, etc.) handles this in a way that makes the most sense; the background image is transformed with the overlay box. While this is not equivalent to backdrop-filter, it makes sense because the background image is part of the transformed element.