A 360px big blur might cause your browser to lag, who would have thought?
I don't know, such large blur radius just strikes me as pretty careless. A gradient would have been a more sensible choice in the first place.
Yeah, I don't consider this a "bug" as much as "wrong use case."
Hey guys, thanks for sharing. Just saw this and wanted to take the time to respond to a couple of the comments and explain why this is such a problem, and why we used a large box-shadow in the first place.
- "A 360px big blur might cause your browser to lag, who would have thought?"
This is a REGRESSION bug. This blur never caused the browser to lag before. Then only with the introduction of the latest version of Chrome it started too. Thats not cool if you ask me.
"A gradient would have been a more sensible choice in the first place."
A gradient, which is what I used as the workaround after finding the bug, does not give as good of an effect. I actually wrote that and the exact reasoning in my article. With a gradient you have 2 choices: only on the top and bottom sides (2 linear gradients) or all around but in a circular shape (radial-gradient). Box-shadow inset allows you to perfectly frame the inside of your image on all 4 sides.
"Yeah, I don't consider this a "bug" as much as "wrong use case."
If you have a responsive full screen image like we do, along with many other giant sites such as medium.com, You're image could easily be 1980px wide. I dont think a 200-300px frame on that is asking too much.
I was working on a webapp a while ago and we'd find dumb Chrome CSS regressions every month. We filed bugs, they're probably still hanging around. Chrome's quality has really gone down (and it still looks terrible on the Mac).
WebKit had a similar bug back when inset box shadow was much newer. A 20px or so box shadow in an element more or less the height of the page caused very slow scrolling. This was fixed years ago, however.