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.

  • MrOtherGuy@lemmy.worldM
    2·
    5 months 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.

    • Godie@lemmy.worldOP
      1·
      5 months 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.

      • MrOtherGuy@lemmy.worldM
        1·
        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.