1292499 - 'background-attachment:fixed' doesn't work when any 'transform' is applied

Status: RESOLVED INVALID

(Core :: CSS Parsing and Computation, defect)

Description

[kalys]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_5) AppleWebKit/601.6.17 (KHTML, like Gecko) Version/9.1.1 Safari/601.6.17

Steps to reproduce:

We created a simple webpage for demo of bug.

http://codepen.io/Zoxon/pen/VjEyBa

Apply "transform" for element with "background-attachment: fixed".


Actual results:

The element's background behaves as not expected.


Expected results:

The background of the second element on demo page above should behave like the first one.

Comment 1

[kalys]

My useragent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:48.0) Gecko/20100101 Firefox/48.0

Comment 2

[Markus Stange [:mstange]]

This was an intentional change to match a change to the spec. See https://www.w3.org/Bugs/Public/show_bug.cgi?id=17521
IIRC Edge has the same behavior. Unfortunately it looks like neither Blink nor Webkit have implemented the change yet, even though it was originally proposed by a Webkit developer.

We changed this in bug 735857.

Comment 3

[mr.anderson.3791]

This problem is new, for me in version 46 and 47 worked OK, but certainly Firefox 49 fixed background not work with transform. All simple parallax effects of suddenly not working.

Comment 4

[Botond Ballo [:botond]]

(In reply to mr.anderson.3791 from comment #3)
> All simple parallax effects of suddenly not working.

Could you provide a link to an example page which has a parallax effect that stopped working? Thanks!

Comment 5

[mr.anderson.3791]

Here are two examples
First is Ok, "background fixed" working on top and bottom picture (simple parallax effect)
http://waldemar.comxa.com/testffbug/index.html

Second example showing bug. On the bottom picture is applied "transform:scaleX(-1)" style. This worked ok in Firefox 46 and 47 but in 49 versions "background fixed" behavior doesn’t work.
http://waldemar.comxa.com/testffbug/index-bug.html

Download test examples
waldemar.comxa.com/testffbug/ff49bug.zip

Comment 6

[Markus Stange [:mstange]]

Ah, I see. We usually don't call simple fixed background effects "parallax"; parallax backgrounds usually aren't completely stationary, they just move slower than the rest of the page.

But you're right, the second example no longer works, and that is intentional. For example, try and see what happens if you assign a fixed width to the container element (e.g. style="width:1400px"), then make your browser window narrow and scroll horizontally. In the past, the image would move horizontally at twice the scroll speed, instead of staying fixed. This is usually not what you want, and this weirdness is part of the reason why we made the change.

Comment 7

[mr.anderson.3791]

If I understood exactly you say that this is not a bug.
OK, but I think this change is not good. Google Chrome browser continues to work as older versions of Firefox (46,47).

Many similar effects on different web sites will suddenly stop working, it reminds me of the unpleasant situations with Internet Explorer.

Comment 8

[Botond Ballo [:botond]]

(In reply to mr.anderson.3791 from comment #7)
> If I understood exactly you say that this is not a bug.
> OK, but I think this change is not good. Google Chrome browser continues to
> work as older versions of Firefox (46,47).
> 
> Many similar effects on different web sites will suddenly stop working, it
> reminds me of the unpleasant situations with Internet Explorer.

Browsers already had inconsistent behaviour with background-attachment:fixed inside a transform.

There was a discussion [1] that involved all major browser vendors, including Chrome, which resulted in a consensus to change the spec [2] to treat background-attachment:fixed inside a transform as if it was background-attachment:scroll.

Firefox implemented that change in bug 735857. I expect Chrome will implement the change in due course, too.

[1] https://lists.w3.org/Archives/Public/www-style/2012Jun/0635.html
[2] https://www.w3.org/Bugs/Public/show_bug.cgi?id=17521

Comment 9

[Markus Stange [:mstange]]

(In reply to Botond Ballo [:botond] from comment #8)
> Firefox implemented that change in bug 735857. I expect Chrome will
> implement the change in due course, too.

The Chrome issue for this is https://bugs.chromium.org/p/chromium/issues/detail?id=667006 .

Comment 10

[Botond Ballo [:botond]]

(Setting dependency for discoverability. I see a similar bug, bug 1304985, was marked the same way.)