| Summary: | CSS blur() filter performance leads to breaking pages | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Dan Wood <daniel4wood> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | NEW --- | ||
| Severity: | Normal | CC: | simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Intel) | ||
| OS: | macOS 11 | ||
Just had to track down a bug causing pages to break in our new docs. Page was working in Chrome, but breaking on iOS and there was a performance impact on Safari. The css was the following (for a footer with a corner gradient) ```css .footer { background-color: $color-black; position: relative; overflow: hidden; z-index: 0; &:after { content: ''; position: absolute; right: -900px; bottom: -1100px; width: 1290px; height: 1100px; background: $gradient-conic-blue-to-red; filter: blur(300px); transform: matrix(-0.09, 1, -1, -0.09, 0, 0); z-index: -1; } } ``` The issue stemmed from our designer creating the gradient using a transformed coloured square with `blur(300px)` applied. I was able to fix this by creating the gradient in a normal way with `background-image`, but I don't think that having a blur of 300px should cause such a performance issue that the page breaks entirely, especially since it works smoothly in chrome.