228312 2021-07-26 20:40:59 -0700 CSS blur() filter performance leads to breaking pages 2026-01-26 14:44:03 -0800 1 1 1 Unclassified WebKit CSS Safari Technology Preview Mac (Intel) macOS 11 NEW InRadar P2 Normal --- 1 daniel4wood webkit-unassigned kristian.djakovic2 simon.fraser webkit-bug-importer oldest_to_newest 1779672 0 daniel4wood 2021-07-26 20:40:59 -0700 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. 1780385 1 webkit-bug-importer 2021-07-29 08:49:21 -0700 <rdar://problem/81273896> 2174722 2 kristian.djakovic2 2026-01-24 02:37:32 -0800 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). 2174996 3 simon.fraser 2026-01-25 19:57:04 -0800 Indeed, we have to revert a change because it caused bugs, but will bring back the better performance in a future release. 2175264 4 kristian.djakovic2 2026-01-26 14:44:03 -0800 (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.