Remix clone Hacker News

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

▲

cubefox a day ago | parent [-]

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

▲

Andrew6rant a day ago | parent [-]

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

	▲	tyleo 19 hours ago \| parent [-]
		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.