Bug 15679 – Fixed backgrounds should behave like 'scroll' inside transformed elements

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Dave Hyatt]

Fixed backgrounds should not be affected by the transform, but should always render as though offset from the viewport.

[Ken Martin]

Created attachment 28389 [details]
simple example of problem

[Ken Martin]

Seeing this in nightly build, too: 530.1+

Have attached a pretty simple example file. There's WebKit "transform:" rules and everywhere "left:" rules in the CSS to demonstrate the problem. (The "everywhere" section is commented out by default.)

[Simon Fraser (smfr)]

Known issue.

[Simon Fraser (smfr)]

Spec <http://dev.w3.org/csswg/css-transforms/> now says:
"Fixed backgrounds on the root element are affected by any transform specified for that element. For all other elements that are effected by a transform (i.e. have a transform applied to them, or to any of their ancestor elements), a value of ‘fixed’ for the ‘background-attachment’ property is treated as if it had a value of ‘scroll’. The computed value of ‘background-attachment’ is not affected."

[Markus Stange]

(In reply to comment #4)
> Spec <http://dev.w3.org/csswg/css-transforms/> now says:
> "Fixed backgrounds on the root element are affected by any transform
> specified for that element. For all other elements that are effected by a
> transform (i.e. have a transform applied to them, or to any of their
> ancestor elements), a value of ‘fixed’ for the ‘background-attachment’
> property is treated as if it had a value of ‘scroll’. The computed value of
> ‘background-attachment’ is not affected."

We (Mozilla) have shipped this change in Firefox 48. IIRC Edge has also shipped it.

[Vitor Roriz]

Pull request: https://github.com/WebKit/WebKit/pull/3433

[Radar WebKit Bug Importer]

<rdar://problem/99926239>

[Matt Woodrow]

*** Bug 245352 has been marked as a duplicate of this bug. ***

[Matt Woodrow]

Affected WPT:

css/css-transforms/transform-fixed-bg-002.html - https://wpt.fyi/results/css/css-transforms/transform-fixed-bg-002.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2021-transforms
css/css-transforms/transform-fixed-bg-004.html - https://wpt.fyi/results/css/css-transforms/transform-fixed-bg-004.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2021-transforms
css/css-transforms/transform-fixed-bg-005.html - https://wpt.fyi/results/css/css-transforms/transform-fixed-bg-005.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2021-transforms
css/css-transforms/transform-fixed-bg-006.html - https://wpt.fyi/results/css/css-transforms/transform-fixed-bg-006.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2021-transforms
css/css-transforms/transform-fixed-bg-007.html - https://wpt.fyi/results/css/css-transforms/transform-fixed-bg-007.html?label=master&label=experimental&product=chrome&product=firefox&product=safari&aligned&view=interop&q=label%3Ainterop-2021-transforms

[EWS]

Committed 255055@main (eba490ba3cc4): <https://commits.webkit.org/255055@main>

Reviewed commits have been landed. Closing PR #3433 and removing active labels.

[EWS]

Committed 252432.728@safari-7614-branch (a1d3edc00b16): <https://commits.webkit.org/252432.728@safari-7614-branch>

Reviewed commits have been landed. Closing PR #171 and removing active labels.