The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Frosting Glass Effect produces strange glow in Chrome Reply To: Frosting Glass Effect produces strange glow in Chrome


The feathering effect is there on the examples that use filter:blur too. If you change the background color to red, you can see it more clearly.

I think it isn’t obvious as it is in your version because:

  1. You’re using a larger blur (10px vs 5px) which creates more feathering
  2. You’ve effectively broken the background into segments. The blur being applied to `.glass down` as a whole while not animating, but during animation, the blur is rendered individually for the animating `.slider`.

It just seems to be the way chrome handles the rendering… I’m not sure if that is a bug or by design, but for a work-around I would recommend using the pre-blurred image route if you can…

I hope that made sense…
In your pen, try changing the background color to red to more easily see what is going on.