- From: L3P3 via GitHub <sysbot+gh@w3.org>
- Date: Tue, 12 May 2020 18:32:12 +0000
- To: public-css-archive@w3.org
I got into this "issue" by performance problems in an animation. I want to blur out the page content when a overlay is shown. The page gets a `blur` class attached when the overlay is shown. (I tried using `backdrop-filter` on the overlay before but performance was horrible with that one!)
```css
#page {
opacity: 1;
transition: opacity 1s;
}
#page.blur {
opacity: .3;
filter: blur(10px);
}
```
The logic is simple: It should apply the blur filter once and then fade out the hole thing smoothly. But what I get is a horrible stuttering; the blur filter gets recalculated for each frame. If I hovever put the hole `#page` content into another div and apply the filter only to that, everything is smooth again.
I do not know if this is a design issue in Chrome or if this wrapper is the correct way of doing it here. In both cases it seems quite obvious to me that adding just another `div` inside the HTML hierarchy just to improve the performance seems ridiculous; really supporting this `::content` thingy, if not to support quick hacks like those.
--
GitHub Notification of comment by L3P3
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/2406#issuecomment-627517522 using your GitHub account
Received on Tuesday, 12 May 2020 18:32:14 UTC