Render the website's contents under the urlbar and tab bar like macOS' Safari

[emvaized]

Very awesome appearance!
My only question is - is it possible to achieve behaviour similar to Safari on Mac OS?
E.g. title bar blures site's content behind it instead of desktop's content.

[eromatiya]

I'm not really sure if you can achieve this by just using CSS. But I think this is better/more beautiful than rendering the desktop. Yeah, this is a nice suggestion/question but I don't know how to implement this. Patches welcome, of course.

[eromatiya]

So it turns out that you can do this by just using CSS:

Change the #nav-bar to

toolbar#nav-bar {
	background: var(--bf-navbar-bg) !important;
	padding: var(--bf-navbar-padding) !important;
	position: absolute !important;
	z-index: 99999 !important;
	margin-bottom: -50px !important;
	backdrop-filter: blur(20px) !important;
	
	/* Remove horizontal line on navbar */
	box-shadow: none !important;
	border-top: none !important;
}

The problem with this is that if the website has navigation bar, firefox's #nav-bar will hide it.

Of course, there could be a better way of implementing this. Is safari also have this problem or it doesn't render the web content under the titlebar if the webpage has navigation bar?

[emvaized]

@manilarome
Sorry, can't confirm it working because I'm still trying to make whole thing work on Mac :))
But looks very promising on your screenshots!

[emvaized]

@manilarome
As for Safari - on Reddit navbar is always down to the panel, like this:

What I found more interesting, is how it's being handled on Ukrainian website called olx - there is auto-hiding navbar, and in Safari it goes completely under the panel when hidden:

Not sure if it's feature and not a bug :) But probably may tell you something about how Safari processes navbars.

[eromatiya]

I'm still trying to make whole thing work on Mac :))

Sorry about the lack of mac support. Good luck!

How safari handle the navbars are interesting. I'll look more into it. Maybe we can find a hack/way to implement this.

[eromatiya]

I think this is a better implementation:

#navigator-toolbox {
	position: absolute !important;;
	overflow: visible !important;
	z-index: 99999;
	backdrop-filter: blur(6px) !important;
}
	
#browser {
	margin-top: -100px !important;
}

Anyway, please consider requesting a PR if you are able to make this theme work on macOS.

[emvaized]

@manilarome
Just tried that on Linux - yeah, look very cool!
But still overlapping navbar :(

[emvaized]

@manilarome

If you manually add transform: translate(0px, 100px); to the body in inspector, it partially solves the issue with overlapping.
But then, navbar scrolls away with page content:

I guess maybe it maybe can be done with some modifications to the sites itself -- maybe using some automatic parsers like TamperMonkey

[eromatiya]

If you manually add transform: translate(0px, 100px); to the body

It doesn't work well here.

I guess maybe it maybe can be done with some modifications to the sites itself -- maybe using some automatic parsers like TamperMonkey

Yeah. I think the navigation bar staying on top was designed for safari browser so we don't really have a way to achieve it by just using CSS.

[emvaized]

@manilarome
Ah, I mean, website's body :)

[emvaized]

@manilarome
Not sure about that - Apple more likely will not rely on developers of all of the websites, and probably preferred to find a way to handle it in the browser itself.

[emvaized]

@manilarome
Please try to add this line to userContent.css file:

body { transform: translate(0px, 100px); }

The only issue I see here is that navbars get scrolled with page instead of standard sticky behavior (see the gif I've sent above).

[eromatiya]

Ah, I mean, website's body :)

Oof, my bad.

Apple more likely will not rely on developers of all of the websites, and probably preferred to find a way to handle it in the browser itself.

Yeah, they're a billion dollar company after all.

Please try to add this line to userContent.css file:

It works! Now if we only have a way to alter the properties of the current webpage's navigation bar to make it sticky or something we could probably implement this right now.

[emvaized]

@manilarome
Yeah :)
I've experimented a little with adding this line to userContent.css:

header { 
        position: sticky !important; /* Set the navbar to fixed position */
    }

And it kind of works - with issues, and only for StackOverflow....

[eromatiya]

I've experimented a little with adding this line to userContent.css:
header {
position: sticky !important; /* Set the navbar to fixed position */
}

Nice! Your fast, eh? Haha.

with issues, and only for StackOverflow....

No problem. I'll also check my most visited websites so I can add them to userContent.

[eromatiya]

One more thing. I noticed that the sidebar is also under the firefox's navbar. Not a big problem tho.

[emvaized]

@manilarome
I guess it can be moved with css downside by 100 px, so not a big issue.

Honestly, I found scrolled navbars issue more disturbing :)
But unfortunately, I'm not that good in css to get any other ideas on how it can be fixed

[eromatiya]

Honestly, I found scrolled navbars issue more disturbing :)

Yeah. If we only have the source code of safari. lol. Anyway do you know the layer below the body of a webpage called? Unscrolled webpage has this gray background and it renders the blur on the firefox's navigation bar useless.

[emvaized]

Honestly, I found scrolled navbars issue more disturbing :)

Yeah. If we only have the source code of safari. lol. Anyway do you know the layer below the body of a webpage called? Unscrolled webpage has this gray background and it renders the blur on the firefox's navigation bar useless.

Hmm, I actually liked this appearance :)
Not sure. Maybe this can help?

[eromatiya]

Not sure. Maybe this can help?

I'm already using this to test the theme real-time. The problem is the gray background seems like a part of the web page. The inspector can't select it. Anyway, we really need to address the issues(nav-bars, headers, etc.) before implementing this.

[emvaized]

Anyway, we really need to address the issues(nav-bars, headers, etc.) before implementing this.

Sure! But I'm glad it seems to be at least possible - only need to solve issues :)

[eromatiya]

I'll just leave this issue open. I don't really have an idea on how to support all the websites' navbar/header. We also need to fix the gray background.

[emvaized]

Yeah, same.
I've also noticed some layout issues with web apps because of translation of the body.

Maybe it'll be great idea to ask on Reddit about this? Somebody may help.

[KiranWells]

I have spent a few hours looking into this, and I wanted to share what I found.

I believe the way Safari does it is that it sets the overflow of the brower object itself to visible. This allows the page to render normally, as it still stays in the same sized and positioned window, but the scrolled content can appear under the navbar. However, userChrome.css does not seem to have access to the direct parent of the :root element. Setting the overflow to visible or adding padding to the browser element, which should show the content inside, does not display the page content. I believe there is some disconnect between the browser element and the :root element, and we do not have access to it. Or, the browser element just doesn't support displaying the overflow.

What could work is somehow moving all the content down 100px (with :root{ padding-top: 100px}), and keeping position:sticky and position:fixed elements 100px away from the top. Maybe a script that takes all elements with a position of sticky or fixed and if they don't have a bottom attribute moving the top down 100px. However, I can't find a way to do this without something like a browser extension.

[Picoseconds]

I believe how Safari does it is that they have the contents of the window ABOVE the top showing under the urlbar. That means the things on top is not actually visible at the current scroll