Hacker News Reader

physically wrong, as it only incorporates the pixels directly behind the glass. Noticeable with the upper few rows overexaggerating the cropped background pixels.

This results in flickering when vertically scrolling over abrupt BG color borders , eg noticeable on mobile browser Twitter UI

View on HN

Yeah. I think Windows Vista didn't have that problem. I assume this can't be solved with CSS.

This can be solved with CSS. Extend the background blur all the way through the element and then use CSS masks to cut out the actual shape you want.

With this, you can remove the border (or inset box shadow), and the edge of the glass will look much, much more real

I tried this and it works! One unfortunate impact is a loss in simplicity. In the example on the page you can apply the non-JavaScript version to pretty much any element and get a nice glass effect with `border-radius` and such still functioning as expected.

Using `clip-path` I'm able to consider background pixels more correctly but it looks like I'd need an extra div and/or some sizing tricks to get everything working exactly as expected.

I'll keep noodling on this and may add an update to the page if a simple solution comes to mind.

Reply on news.ycombinator.com