Re: [fxtf-drafts] Not all Filters Should Lead to Containing Blocks on All Fixed/Absolute Descendants (#402)

The problem with what you propose is that the content to be filtered would then not be atomic in terms of z-order; there could be external elements that are in-between (in terms of z-ordering) the different parts of the element to be filtered.  Filters, however, are defined in terms of painting the entire contents of the element to be filtered into a buffer, applying the filter to that buffer, and then drawing that buffer onto the background.  If the filter is applied to multiple parts separately which are then separately drawn onto the background, it produces substantially different and incorrect results.

To take a simple example:

```html
<div style="background: black; width: 100px; height: 10px">
  <div style="background: yellow; width: 100px; height: 10px; position: absolute"></div>
</div>
```

Here's what it looks like with the original, the correct filtered (with `blur(5px)`) result, and the incorrect separately filtered result (see [source html](http://software.hixie.ch/utilities/js/live-dom-viewer/?%3C!DOCTYPE%20html%3E%0A%3Cstyle%3E%0A%0Abody%20%7B%20margin%3A%2050px%20%7D%0Abody%20%3E%20div%20%7B%20display%3A%20inline-block%3B%20margin-right%3A%2050px%3B%20%7D%0A.blur%20%7B%20filter%3A%20blur(5px)%20%7D%0A%0A%3C%2Fstyle%3E%0A%0A%3Cdiv%20style%3D%22background%3A%20black%3B%20width%3A%20100px%3B%20height%3A%2010px%22%3E%0A%20%20%3Cdiv%20style%3D%22background%3A%20yellow%3B%20width%3A%20100px%3B%20height%3A%2010px%3B%20position%3A%20absolute%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20style%3D%22background%3A%20black%3B%20width%3A%20100px%3B%20height%3A%2010px%22%20class%3D%22blur%22%3E%0A%20%20%3Cdiv%20style%3D%22background%3A%20yellow%3B%20width%3A%20100px%3B%20height%3A%2010px%3B%20position%3A%20absolute%22%3E%3C%2Fdiv%3E%0A%3C%2Fdiv%3E%0A%0A%3Cdiv%20style%3D%22background%3A%20black%3B%20width%3A%20100px%3B%20height%3A%2010px%22%20class%3D%22blur%22%3E%3C%2Fdiv%3E%3Cdiv%20style%3D%22margin-left%3A%20-150px%3Bbackground%3A%20yellow%3B%20width%3A%20100px%3B%20height%3A%2010px%22%20class%3D%22blur%22%3E%3C%2Fdiv%3E%0A)):

![Screenshot from 2020-07-05 09-13-52](https://user-images.githubusercontent.com/248721/86536882-108de180-bea0-11ea-8a0d-b4b7ff1dcf95.png)

To avoid this incorrect result, the spec takes the same approach that it does for a number of other properties and ensures that the elements create a containing block, which in turn allows their entire subtree to be visually atomic.

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

Received on Sunday, 5 July 2020 16:17:28 UTC