Achieving Consistent Blur Effects Across Different Browsers: A Guide
Could someone please advise me on why the blur effect doesn't appear consistent across all browsers like Chrome, Firefox, and Safari? In Chrome, the blur effect doesn't display correctly, while in Firefox, it appears exactly as desired. However, in Safari, the blur effect seems to have a slight yellowish tint. Why does this occur, and how can I ensure consistency across all browsers?
Codepen link: https://codepen.io/Amit-Soni-the-vuer/pen/GRLPjax
10 Replies
just out of curiosity, what happens if you use
transform: translateZ(0);?Fatigued but didn't yield the anticipated results.
how about
will-change: blurThanks, but not working.
im all out of ideas then
this post is a bit older, but i think it explains the difference
https://stackoverflow.com/questions/70523380/how-to-blur-consistently-cross-browsers
tldr: Browsers have different limits the blur can have and it depends on the users hardware. For a consistant blur you have to draw it yourself (canvas)
Stack Overflow
How to blur() consistently cross browsers?
There is a difference in rendering of blur effect in Firefox and Chrome.
For some small value like filter: blur(30px) Chrome and Firefox produce nearly the same Gaussian blur.
But for a big value l...
do those limits apply to svg filters?
i think so yes. the calcs and renders are done by the browser. so we depend on the engine how it deals with it
that would make sense
Ok thanks. For guidance☺️