Re: [fxtf-drafts] [filter-effects-1] What is the visual effect of filter() on the document element?

I would expect a filter on the root element to affect the canvas, just like a transform on the root element is expected to affect the background canvas.

[From the transforms spec](https://drafts.csswg.org/css-transforms/#transform-rendering) (end of the linked section):

> Note: If the root element is transformed, the transformation applies to the entire canvas, including any background specified for the root element. Since the background painting area for the root element is the entire canvas, which is infinite, the transformation might cause parts of the background that were originally off-screen to appear. For example, if the root element’s background were repeating dots, and a transformation of scale(0.5) were specified on the root element, the dots would shrink to half their size, but there will be twice as many, so they still cover the whole viewport.

**However,** a [modified version of your test](https://codepen.io/AmeliaBR/pen/JvERRb/) shows that browsers don't actually implement that part of the Transforms spec: WebKit and Chrome transform the background, but don't fill in extra background image repeats, while Firefox and Edge don't transform the root background at all.

So, for implementers, these should probably be fixed together. But in both cases, we probably need spec clarifications, and actual normative text (not just the informative note from Transforms).


_____________________

Aside: For authors, a workaround that should work for now is to put the background on the `<body>` element, give the body a min-height of 100vh (minus margins), and then give the root element a solid background color to prevent hoisting of the body background to the canvas.

-- 
GitHub Notification of comment by AmeliaBR
Please view or discuss this issue at https://github.com/w3c/fxtf-drafts/issues/282#issuecomment-385204018 using your GitHub account

Received on Saturday, 28 April 2018 20:40:47 UTC