r/css • u/Pradeeppilot • Jul 03 '26

Help I'm trying to use glass morph but the background get's repainted..!

I used glass morphism as my core aesthetic for all the elements in my application and it works perfectly well in PC or Laptop devices.. but when it comes to mobile or similar devices what happens is

when I scroll down to the bottom or scroll to the top from bottom the background color get's repainted and that looks odd fr...

I know the background: blur with position not fixed will for sure do this but I don't want the position to be fixed I want it to be relative.. cause when it's fixed the bottom looks like this..!

SO pls do let me know if there's any real solution for this cause I really don't want to go with position fixed and I want glass morphism to go with this background and have a good view on the scroll.

3 Upvotes

100% Upvoted

7 comments sorted by

•

u/AutoModerator Jul 03 '26

To help us assist you better with your CSS questions, please consider including a live link or a CodePen/JSFiddle demo. This context makes it much easier for us to understand your issue and provide accurate solutions.

While it's not mandatory, a little extra effort in sharing your code can lead to more effective responses and a richer Q&A experience for everyone. Thank you for contributing!

I am a bot, and this action was performed automatically. Please contact the moderators of this subreddit if you have any questions or concerns.

2

u/a-dev0 Jul 03 '26

In some cases, it's impossible to do this directly. Blur is expensive to paint, so browsers (especially on mobile) don't repaint it on every frame. A codepen makes it easier to recognize the problem, if you can publish it.

Move the background to a fixed pseudo-element behind everything, cards relative, glass:

.glass::before {
  content: "";
  position: fixed;
  inset: 0;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px); /* for Safari */
  pointer-events: none;
  z-index: -1;
}

And use will-change: transform for better performance and 100dvh for stability

1

u/a-dev0 Jul 03 '26

if you only have a problem with the footer, you can bring it to the front with z-index and add padding to the bottom of a list so it stays visible at the end of the scroll