Radius of CSS blur filter is limited to 100px max
Categories
(Core :: Graphics, defect, P3)
Tracking
()
People
(Reporter: waste, Unassigned)
References
Details
(Keywords: compat, perf, Whiteboard: [gfx-noted])
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36
Steps to reproduce:
Apply a CSS blur filter or an SVG blur filter to an element (DOM-element, SVG shape). Set blur radius to a number larger than 100px.
See example here: https://codepen.io/DirkWeber/pen/778210d9a0c95d3dc6bc8e94d04a1977
Actual results:
Blur radius will not exceed 100px.
Expected results:
Blur radius should match value of CSS property.
|
||
Comment 1•6 years ago
|
||
Hi @Dirk, here is my results of testing:
[Platforms affected]: Mac OS X, Ubuntu 16.04, Windows 10*
[Firefox versions affected]: release 65.0.2, beta 66.0b13, latest nightly 67.0a1
-the issue can be reproduced - notice the asterix mark with a behavior on Windows 10
- Mention that on Windows 10 release version the issue cannot be reproduced but on other versions beta, nightly the issue can be reproduced.
Thanks for your contribution.
|
||
Updated•6 years ago
|
|
|
||
Comment 2•6 years ago
|
||
Markus, it looks like bug 1058753 implemented a lower cap for the blur filter in software. Given this was implemented 5 years ago, maybe the cap is too low and should be re-evaluated?
|
||
Comment 3•6 years ago
|
||
Seems like we use a cap of 300px for non-software: https://searchfox.org/mozilla-central/search?q=MAX_BLUR_RADIUS&path=
So we could potentially raise the software blur cap to that. But it's still a very expensive effect and there's definitely a reason for the cap.
Dirk, do you have a demonstration of using such a large blur radius value on a real website? What issues does the limit cause for you, outside of a synthetic testcase?
Hi there. A blur radius >100px will be enough for css authors most of the time. SVG is a different thing though. For illustrators big blurred elements come in handy to create the illusion of irregularly shaped gradients in things like like clouds, flares, fog etc.
|
||
Updated•3 years ago
|
Canvas filter = 'blur(...px)' is also affected and when doing a high-resolution print this limit is hit rather quickly. Instead of limiting the blur radius Chrome does a (visibly) much lower quality blur. That would at least not break things unexpectedly like now. Would that be an option? Or in the very least a warning in the console about hitting this limit?
|
||
Comment 7•3 years ago
|
||
One more thing to note is that the cap appears to be 100 device pixels, not CSS px, which means that for users with high-dpi displays the effective limit becomes correspondingly lower. E.g. with the codepen example from comment 0 on a Retina-display MacBook, it is effectively clamped to 50px.
it's not been resovled now at firefox 111.0 x64 macOS 13.2.1
both css filter and svg feGaussianBlur got this.
here's the reprodction link: https://codepen.io/floyd-li/pen/jOvxVpz
Description
•