Bug 228312 – CSS blur() filter performance leads to breaking pages

• Component: CSS
• Status: NEW

[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.

[Radar WebKit Bug Importer]

<rdar://problem/81273896>

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.

(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.