Bug 228312 - CSS blur() filter performance leads to breaking pages
Summary: CSS blur() filter performance leads to breaking pages
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Intel) macOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2021-07-26 20:40 PDT by Dan Wood
Modified: 2021-07-29 08:49 PDT (History)
2 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Dan Wood 2021-07-26 20:40:59 PDT
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.
Comment 1 Radar WebKit Bug Importer 2021-07-29 08:49:21 PDT
<rdar://problem/81273896>