Firefox Customs

4 readers

10 users here now

Chat with us!

Post your unsupported Firefox customizations here!

From the makers of r/FirefoxCSS

Links

Related

Firefox

Rules

Posts must have flair!
Posts cannot be memes/shitposts. They should be about Firefox customization with CSS.
Please be civil. Bear in mind that many users come here for help and would be turned off by insults and rudeness.
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.
Do NOT use url-shorteners or link to compressed downloads (such as zip or rar) when sharing code.

founded 1 year ago

MODERATORS

[email protected]

apply filter to new-tab makes the page has unwanted horizontal scroll (lemmy.world)

submitted 5 months ago by [email protected] to c/[email protected]

3 comments fedilink hide all child comments

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.

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 2 points 5 months ago (1 children)

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 5 months ago (1 children)

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 5 months 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.