[Webkit-unassigned] [Bug 228312] New: CSS blur() filter performance leads to breaking pages

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=228312

            Bug ID: 228312
           Summary: CSS blur() filter performance leads to breaking pages
           Product: WebKit
           Version: Safari Technology Preview
          Hardware: Mac (Intel)
                OS: macOS 11
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: daniel4wood at icloud.com

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.

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20210727/c99ae170/attachment.htm>