DiscordStyles/FrostedGlass

Theme causes the window to "ride up"

viiuan opened this issue ยท 8 comments

(Slight edits after reading the first reply.)

Describe the bug

The contents of the entire window "ride up" a certain amount, resulting in an empty black bar at the bottom.
This can be fixed by reloading the app, but is still a minor annoyance.
This is also a very recent issue, I believe it started in the last month or so.

To Reproduce

Paste content into the chat bar that is longer than two lines high.

Screenshots

https://prnt.sc/x-zc6xBLD88O
It's not so obvious, so there's no screenshot, but it does push the entire window contents up and so the top of the window gets cut off.

Infomation (please complete the following information)

Discord channel: Stable
OS: Windows 10
Mod: BetterDiscord (Also occurs on the browser version of Discord when the theme is installed using the Stylus extension)
Discord language: English

This is caused by pasting in something that takes up more than two lines in the chat box. It must be done in a single paste and it doesn't seem to be possible to trigger this by just typing. I can replicate it consistently by pasting in the following:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

Interesting, thanks for that info.

Gibbu commented

It's an issue with adding the spacing around Discord. There's no way to fix this unfortunately without removing the spacing all together.
Setting the --window-padding variable to 0px will not fix this.

I noticed this same exact issue as well simply by going from "Home" to any server.

I took a look into the frosted glass CSS source code and it seems to me that the issue has to do with whatever is going with #app-mount .layer-86YKbF::before.

Since I didn't add any --window-padding or --window-roundness I just essentially "removed" the #app-mount .layer-86YKbF::before pseudo-element by setting its content property to unset like so:

#app-mount .layer-86YKbF::before {
  content: unset;
}

Next, I edited #app-mount::before like so:

#app-mount::before {
  background: linear-gradient(var(--tint), var(--tint)), var(--background-image);
  background-position: var(--background-image-position, center);
  background-size: var(--background-image-size, cover);
  background-repeat: var(--background-image-repeat, no-repeat);
  filter: blur(var(--background-image-blur));
  width: 100vw;
  height: 100vh;
}

Now it works exactly the way I want it to.

Just tried that out by inserting your CSS into my theme's file- works like a charm! Thanks so much.
I wasn't using the window padding/roundness anyway so this is great.

This shouldn't be closed. There isn't any fix merged and it isn't even entirely fixed.

Gibbu commented

True. It only fixes it if you don't use any --window-padding.
I'm currently reworking Frosted Glass right now and trying different methods of blurring the image. Shouldn't be any major differences.

Gibbu commented

I might've FINALLY fixed this!!!
I've placed the blurring on a different layer.
I've also used another blurring method which might cause lag?

If it does create lag I'll revert back and use a different method which still had the "ride up" but not as bad.