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>