1352915 - background-attachment:fixed is disabled by transform-style:preserve-3d

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Desmond]

Attachment: screenshot to illustrate what i'm talking about

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

Steps to reproduce:

i create a div with horizontal scroll
  > inside is a div display table
    > inside is a div display table cell
       > image div with 3 background images with fixed, scroll, scroll
    > another display table cell
       > some content

onload, I animate the image div in with left: -100% to 0


Actual results:

If you narrow the viewport to cause the div to scroll horizontally, you can see the image is not fixed to viewport when you scroll, it scrolls with the content. By image, I'm talking about the abstract stuff at top. You can view it here: shps.co.za


Expected results:

The abstract stuff at the top should be fixed to the viewport, which google chrome does it correctly. you can use google chrome to view it here: shps.co.za/debug/view.php?url=index.php

Comment 1

[Timothy Nikkel (:tnikkel)]

Can you provide a reduced testcase please? Something that has only the things necessary to reproduce the bug with all the extra stuff removed?

Comment 2

[Desmond]

I wish I could. I haven't been able to reproduce the bug. But this issue doesn't occur with google chrome, so I'm hoping that this is a bug with firefox.

I will have to remove everything and add them back one by one, it might take me some time...

Comment 3

[Timothy Nikkel (:tnikkel)]

Starting with your page that shows the problem it might be easier to remove things one by one, if the problem remains keep removing things, if the problem goes away then replace the thing you removed and continuing removing other things.

Comment 4

[Desmond]

(In reply to Timothy Nikkel (:tnikkel) from comment #3)
> Starting with your page that shows the problem it might be easier to remove
> things one by one, if the problem remains keep removing things, if the
> problem goes away then replace the thing you removed and continuing removing
> other things.

Ok, will try that. Is there anything that could possibly change background-attachment: fixed behaviour?

Comment 5

[Timothy Nikkel (:tnikkel)]

(In reply to Desmond from comment #4)
> (In reply to Timothy Nikkel (:tnikkel) from comment #3)
> > Starting with your page that shows the problem it might be easier to remove
> > things one by one, if the problem remains keep removing things, if the
> > problem goes away then replace the thing you removed and continuing removing
> > other things.
> 
> Ok, will try that. Is there anything that could possibly change
> background-attachment: fixed behaviour?

Not sure. Maybe multiple background layers?

Comment 6

[Desmond]

(In reply to Timothy Nikkel (:tnikkel) from comment #5)
> (In reply to Desmond from comment #4)
> > (In reply to Timothy Nikkel (:tnikkel) from comment #3)
> > > Starting with your page that shows the problem it might be easier to remove
> > > things one by one, if the problem remains keep removing things, if the
> > > problem goes away then replace the thing you removed and continuing removing
> > > other things.
> > 
> > Ok, will try that. Is there anything that could possibly change
> > background-attachment: fixed behaviour?
> 
> Not sure. Maybe multiple background layers?

Thank you for your help. I was able to find the problem and reproduce the bug. So turns out, it is transform-style: preserve-3d. Here is a code sample that reproduces the problem: https://codepen.io/anon/pen/vxPeXW.

I don't know if preserve-3d is supposed to disable background-attachment: fixed? I hope this is a bug.

Comment 7

[Desmond]

sorry, I forgot to add in background-attachment: fixed in the code sample, but you can just add it.

Comment 8

[Timothy Nikkel (:tnikkel)]

Regression range is
https://hg.mozilla.org/integration/mozilla-inbound/pushloghtml?fromchange=26c4c6e4f701839d851f12861a77ac1dfa7a695a&tochange=8150c0a47bd7f0dc3b0f5b7fc47b685056579087

So Bug 735857, which was an intentional change to match the (new) spec. It seems like we are following the spec here, unless the definition that the spec uses of "transformed" doesn't include things that have preserve-3d but not actual transforms.

Comment 9

[Desmond]

I guess I will just remove preserve-3d and only add it when I do transforms. Thanks for your helps.

Comment 10

[Botond Ballo [:botond]]

(In reply to Timothy Nikkel (:tnikkel) from comment #8)
> It
> seems like we are following the spec here, unless the definition that the
> spec uses of "transformed" doesn't include things that have preserve-3d but
> not actual transforms.

It's not fully clear from the spec whether that's intended to be included.

Based on Edge's behaviour on the testcase from comment 6, Edge thinks it shouldn't be. (Chrome doesn't implement the spec change at all yet, so while it shares Edge's behaviour, it does so for a different reason.)

I filed a spec issue to request clarification on the matter: https://github.com/w3c/csswg-drafts/issues/1199

Comment 11

[rorypickering]

I've experienced this same bug. It seems minor, but this totally messed up the layout of one of my existing client sites as I was relying heavily on 'background-attachment: fixed' for the display of images.

In my case, removing 'transform: translateZ(0);' from body solved the issue.

Comment 12

[Botond Ballo [:botond]]

(In reply to Botond Ballo [:botond] from comment #10)

I filed a spec issue to request clarification on the matter:
https://github.com/w3c/csswg-drafts/issues/1199

Based on the discussion in that issue this week, it appears that the intention is that elements which have preserve-3d but not actual transforms should not disable background-attachment: fixed, i.e. we should change our behaviour here.

Comment 13

[finesserus]

A transform: translate(0, 0) style causes the background to be not fixed too