MacOS: Firefox Browser with Real Fullscreen

On a Mac, the Firefox Browser can’t be used in a real fullscreen. This means: Even when you use the default fullscreen option with cmd+shift+f, the address bar and tabs remain visible. The internet says, this is a Firefox bug on MacOS.

The solution is to use UserChrome.css, a way to customize a modern Firefox Browser.

Four steps:

• Find your profile folder by typing about:support into the address bar. There you can find the path.
• Inside this folder, create a subfolder called chrome and inside a file userChrome.css.
• Copy the following CSS code into userChrome.css:

#navigator-toolbox[inFullscreen] {
    height: 0.5rem;
    margin-bottom: -0.5rem;
    opacity: 0;
    overflow: hidden;
}

#navigator-toolbox[inFullscreen]:hover,
#navigator-toolbox[inFullscreen]:focus-within {
    /*
     * Add some padding between the navbar and the top screen edge 
     * to be more visible while the macOS hidden menu bar shows up. 
     * The macOS menubar will hide after a few seconds.
     */
    padding-top: 1rem;
    height: auto;
    margin-bottom: 0rem;
    opacity: 1;
    overflow: visible;
}

• Close and restart Firefox.

Links

• Stackoverflow answer
• Tutorial