Bug 228312
| 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: | kristian.djakovic2, simon.fraser, webkit-bug-importer |
| Priority: | P2 | Keywords: | InRadar |
| Version: | Safari Technology Preview | ||
| Hardware: | Mac (Intel) | ||
| OS: | macOS 11 | ||
Dan Wood
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.
| Attachments | ||
|---|---|---|
| Add attachment proposed patch, testcase, etc. |
Radar WebKit Bug Importer
<rdar://problem/81273896>
kristian.djakovic2
Hi there! Seems like the issue was resolved but it was reintroduced on iOS26.2
If you checkout this page, https://ios-blur.static.domains/, on iOS26.2 device (I used my iPhone 16 Pro) you will see slow load, then blank screen for ~15s and then the text and background color will show.
This is not the case on older versions of iOS (we tried iOS 17 and iOS 26.1).
Simon Fraser (smfr)
Indeed, we have to revert a change because it caused bugs, but will bring back the better performance in a future release.
kristian.djakovic2
(In reply to Simon Fraser (smfr) from comment #3)
> Indeed, we have to revert a change because it caused bugs, but will bring
> back the better performance in a future release.
Awesome!
In case anyone has the same issue, filters on SVG have no issues and can be used as a replacement.