February 02, 2025 • 2 min read
I recently purchased a new Macbook Pro 14in. While it has been a great machine for my work, I have encountered this very annoying issue where if I open a website on the Chrome or Edge browser, entering full screen mode causes the website's top portion to be covered. However, if you use Safari, websites should continue to display properly for you. First let me show you the problem and then I will go through the fix. You can also just skip to the fix portion of this post.
At the time of this post I'm using the following versions.
In a normal scenario, if you don't have a website in full screen mode, the page may look something like this.
Then if you enter full screen mode, this is what happens.
There are a few things we want to note here from the screen shot above.
Luckily, there is an easy way to fix this issue. On your Mac, click on the Apple logo in the menu bar and then select "System Settings". In the search bar of System Settings, search for "Automatically hide and show the menu bar".
Click on the first option that shows up. In the drop down, either set the option to "Always", "In Full Screen Only", or "Never".
Now if you go back to your browser, notice the menu bar no longer shows up in full screen mode. Therefore, there is nothing pushing down the tab bar and search bar which were covering the site. To display the menu bar, simply move your mouse pointer to the top of the screen and it will automatically show up.
Since this issue does not reproduce on Safari, this means that this is most likely a browser specific bug. Since both Edge and Chrome are built on Chromium, I have reported the issue on the chromium website. You can track the issue here. The proper fix might have to be on the browser side so that you can set whatever setting you want for the menu bar and not have it covering the websites you visit.