Frosting Glass Effect produces strange glow in Chrome

[Dokk]

Hello everyone!

I’ve been playing around with the frosting glass effect with the approach from https://css-tricks.com/frosting-glass-css-filters/.

I just wanted it to be a little different, so that I can have multiple columns (in my case 5) each with their own “frosting glass”.

I’ve expanded on the original CodePen from adobe:

http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c

and created my own with these multiple columns:
http://codepen.io/DonDozone/pen/KVVRbw

My problem now is, that in Chrome, during the transition phase each column has a white glow to it, presumably from the underlaying white tint. It disappears, as soon as the transition is finished, both up and down.

When I expand the CSS transforms to the z-layer as it is proposed in the original article, I have this glow all the time. So like:
.glass .slider{
transform: translateY(90%) translateY(-5rem) translateZ(0);
}

In the original codepen, this glow isn’t there at all.

Unfortunately I’m not able to figure out, what I am doing different regarding this transition.

Any help is highly appreciated! Thank you!

[bearhead]

You’re getting those whiter edges because Chrome renders filter:blur with feathered edges, so you’re seeing the white background show through there more.

The demo you based your pen on doesn’t actually use filter:blur instead, it uses two different background images. One is normal, and the other has been pre-blurred with image editing software.

If you must use filter:blur I’m not sure if it is possible to get around the edge feathering effect…

[Dokk]

Thank you for the replay. My bad, I pasted the wrong Codepen:

http://codepen.io/adobe/pen/d056d1b26b9683c018f9bb9e0f1b0e1c

This one uses also blur, but doesn’t show feathering. Also, my Pen only shows the effect during animation, not when the start or end point of the animation is reached.

Edit: Actually, upon reviewing my original post, I realized that the original pen does also use the filter:blur. It’s only the first example in the original post that uses a pre-blurred version.

[bearhead]

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.

[Dokk]

Thank you for your reply, bearhead.

You’re right, this effect is noticable in chrome, no matter what.

I don’t know, why it isn’t there when the blurred frame is resting and appears only on movement, but that seems to be some chrome issue.

So I went back to a pre-blurred picture, because then it works everywhere. Even on IE, where I had some serious issues in 10 & 11.

It’s a pity, I was hoping to achieve it with CSS only, but it seems that the web is not just quite ready yet ;)

Thank you nevertheless,

regards.

[Author]

Posts