apply filter to new-tab makes the page has unwanted horizontal scroll
apply filter to new-tab makes the page has unwanted horizontal scroll
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.
The same will also happen with
filter,transformand a few other properties. The reason is that when these properties are applied then a new containing block is formed, and that will causefixedandabsolutepositioned 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 thebodyhas 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-filterhere) 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:rootinstead ofbody.thanks for the explanation but I can't get it to work. you said
:rootbut 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.I mean simply like this:
:root{ backdrop-filter: brightness(99%); }Alternatively
htmlselector would also work to refer to the document root element - about:newtab is a html document after all.