12
submitted 1 month ago by [email protected] to c/[email protected]

hi,
I wonder if is possible to fix this rare behavior when I apply the next css in the new-tab:

body{
backdrop-filter: brightness(99%);
}

if I don't add the filter there isn't a scroll.

top 3 comments
sorted by: hot top controversial new old
[-] [email protected] 2 points 1 month ago

The same will also happen with filter, transform and a few other properties. The reason is that when these properties are applied then a new containing block is formed, and that will cause fixed and absolute positioned children to behave somewhat unexpectedly in they now "appear to reserve space" whereas normally they don't. In this case the newtab options menu is fixed positioned, and thus if the body has backdrop-filter then the menu box causes the page to overflow.

There is an exception to that mentioned containing-block formation though; if you apply the property (such as backdrop-filter here) to the document root element then no extra containing block is generated. I suppose it should be pretty simple to just apply your rule to :root instead of body.

[-] [email protected] 1 points 1 month ago

thanks for the explanation but I can't get it to work. you said :root but I don't understand how, I saw a div called root inside body element, I tried too apply to html jeje I don't know, maybe I should start to love the scroll.

[-] [email protected] 1 points 1 month ago

I mean simply like this:

:root{ 
  backdrop-filter: brightness(99%);
}

Alternatively html selector would also work to refer to the document root element - about:newtab is a html document after all.

this post was submitted on 01 Jun 2024
12 points (100.0% liked)

Firefox Customs

4 readers
2 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Rules

  1. Posts must have flair!
  2. Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
  3. Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
  4. When posting large amount of code use a service dedicated to hosting text snippets, such as pastebin, hastebin, github gist or equivalent. Relatively short snippets can be wrapped in code-block for inline viewing.
  5. Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago