X
Tap here to go to the mobile version of the site.

Support Forum

I can't hide the navigation bar and tab bar in full screen mode in Mac OS.

Posted

I can't hide the navigation bar and tab bar in full screen mode in Mac OS.

No matter what I try, I can't see to achieve a 'true' full-screen experience on Firefox Quantum (version 57.0.3), on Mac OS Sierra (10.12.6). In particular, I want to hide the navigation/address bar, and the tab bar.

I have read through every question in the community that is similar to this issue, and tried a number of things: - Ensured that 'Hide Toolbars' is selected in the context menu that appears when right clicking on the tab bar in full screen mode. - Ensured that 'browser.fullscreen.autohide' is set to 'true' in about:config - Restarted in 'Safe Mode' (temporarily disables all add-ons) - Tried to install 'Old Lion Fullscreen' extension, but it isn't compatible with this version of Firefox. - Used the 'Refresh Firefox' option (reverts Firefox to factory settings and defaults, including deleting all add-ons and custom settings) - Uninstalled and reinstalled Firefox

The only thing I tried that worked was: - Created and modified a CSS file called userChrome.css and placed it in the right folder in about:profiles (css code is below) I will use this until something comes up, because it's not perfect, a little glitchy.

I have been using Chrome for the past several years, and really wanted to give Firefox a chance again, but browsing in full-screen with no distractions, nothing but the content, is really important to me. I don't want this to be the reason I switch back to Chrome. Therefore, I would really appreciate any help with this.

CSS code used in userChrome.css:

/*Hide navigation bars except on hover*/
#navigator-toolbox[inFullscreen] {
    position: relative;
    height: 8px;  /* Height of bar that needs to be hovered over */
    transition:.2s linear all;
    overflow: hidden;
    opacity:0;
    margin-bottom: 0px;
    background:#999;
    z-index: 1;
}

#navigator-toolbox[inFullscreen]:hover {
    height: 72px;
    margin-bottom: -64px;
    opacity:1;
}

#content-deck[inFullscreen]{
    position:relative;
    z-index: 0;
}

#titlebar-buttonbox[inFullscreen]{
    opacity:0;
    height: 4px;
    overflow: hidden;
    transition:.2s linear all;
}

#titlebar-buttonbox[inFullscreen]:hover{
    opacity:1;
    height: auto;
}
I can't hide the navigation bar and tab bar in full screen mode in Mac OS. No matter what I try, I can't see to achieve a 'true' full-screen experience on Firefox Quantum (version 57.0.3), on Mac OS Sierra (10.12.6). In particular, I want to hide the navigation/address bar, and the tab bar. I have read through every question in the community that is similar to this issue, and tried a number of things: - Ensured that 'Hide Toolbars' is selected in the context menu that appears when right clicking on the tab bar in full screen mode. - Ensured that 'browser.fullscreen.autohide' is set to 'true' in about:config - Restarted in 'Safe Mode' (temporarily disables all add-ons) - Tried to install 'Old Lion Fullscreen' extension, but it isn't compatible with this version of Firefox. - Used the 'Refresh Firefox' option (reverts Firefox to factory settings and defaults, including deleting all add-ons and custom settings) - Uninstalled and reinstalled Firefox The only thing I tried that worked was: - Created and modified a CSS file called userChrome.css and placed it in the right folder in about:profiles (css code is below) I will use this until something comes up, because it's not perfect, a little glitchy. I have been using Chrome for the past several years, and really wanted to give Firefox a chance again, but browsing in full-screen with no distractions, nothing but the content, is really important to me. I don't want this to be the reason I switch back to Chrome. Therefore, I would really appreciate any help with this. CSS code used in userChrome.css: <pre><nowiki>/*Hide navigation bars except on hover*/ #navigator-toolbox[inFullscreen] { position: relative; height: 8px; /* Height of bar that needs to be hovered over */ transition:.2s linear all; overflow: hidden; opacity:0; margin-bottom: 0px; background:#999; z-index: 1; } #navigator-toolbox[inFullscreen]:hover { height: 72px; margin-bottom: -64px; opacity:1; } #content-deck[inFullscreen]{ position:relative; z-index: 0; } #titlebar-buttonbox[inFullscreen]{ opacity:0; height: 4px; overflow: hidden; transition:.2s linear all; } #titlebar-buttonbox[inFullscreen]:hover{ opacity:1; height: auto; }</nowiki></pre>

Modified by cor-el

Additional System Details

Installed Plug-ins

  • Shockwave Flash 28.0 r0

Application

  • Firefox 57.0.3
  • User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.12; rv:57.0) Gecko/20100101 Firefox/57.0
  • Support URL: https://support.mozilla.org/1/firefox/57.0.3/Darwin/en-US/

Extensions

  • 1Password: Password Manager and Secure Wallet 4.6.12.90 (onepassword4@agilebits.com)
  • Adobe Acrobat 18.0.4 (web2pdfextension.17@acrobat.adobe.com)
  • Fontface Ninja 3.0.4 (@ffn)
  • Pushbullet 335 (jid1-BYcQOfYfmBMd9A@jetpack)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription:
  • adapterDeviceID: 0x162b
  • adapterDrivers:
  • adapterRAM:
  • adapterVendorID: 0x8086
  • crashGuards: []
  • driverDate:
  • driverVersion:
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'name': u'HW_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'available', u'description': u'OpenGL Compositing', u'name': u'OPENGL_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'unavailable', u'description': u'WebRender', u'name': u'WEBRENDER', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u"Build doesn't include WebRender", u'type': u'runtime'}]}]}
  • info: {u'TileHeight': 1024, u'ApzWheelInput': 1, u'ApzDragInput': 1, u'ApzKeyboardInput': 1, u'ApzAutoscrollInput': 1, u'AzureFallbackCanvasBackend': u'none', u'TileWidth': 1024, u'AzureCanvasAccelerated': 1, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • offMainThreadPaintEnabled: False
  • webgl1DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_float_linear OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_depth_texture WEBGL_draw_buffers WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc MOZ_WEBGL_depth_texture
  • webgl1Renderer: Intel Inc. -- Intel(R) Iris(TM) Graphics 6100
  • webgl1Version: 4.1 INTEL-10.25.17
  • webgl1WSIInfo: CGL
  • webgl2DriverExtensions: GL_ARB_blend_func_extended GL_ARB_draw_buffers_blend GL_ARB_draw_indirect GL_ARB_ES2_compatibility GL_ARB_explicit_attrib_location GL_ARB_gpu_shader_fp64 GL_ARB_gpu_shader5 GL_ARB_instanced_arrays GL_ARB_internalformat_query GL_ARB_occlusion_query2 GL_ARB_sample_shading GL_ARB_sampler_objects GL_ARB_separate_shader_objects GL_ARB_shader_bit_encoding GL_ARB_shader_subroutine GL_ARB_shading_language_include GL_ARB_tessellation_shader GL_ARB_texture_buffer_object_rgb32 GL_ARB_texture_cube_map_array GL_ARB_texture_gather GL_ARB_texture_query_lod GL_ARB_texture_rgb10_a2ui GL_ARB_texture_storage GL_ARB_texture_swizzle GL_ARB_timer_query GL_ARB_transform_feedback2 GL_ARB_transform_feedback3 GL_ARB_vertex_attrib_64bit GL_ARB_vertex_type_2_10_10_10_rev GL_ARB_viewport_array GL_EXT_debug_label GL_EXT_debug_marker GL_EXT_framebuffer_multisample_blit_scaled GL_EXT_texture_compression_s3tc GL_EXT_texture_filter_anisotropic GL_EXT_texture_sRGB_decode GL_APPLE_client_storage GL_APPLE_container_object_shareable GL_APPLE_flush_render GL_APPLE_object_purgeable GL_APPLE_rgb_422 GL_APPLE_row_bytes GL_APPLE_texture_range GL_ATI_texture_mirror_once GL_NV_texture_barrier
  • webgl2Extensions: EXT_color_buffer_float EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_texture_float_linear WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_lose_context MOZ_WEBGL_lose_context MOZ_WEBGL_compressed_texture_s3tc
  • webgl2Renderer: Intel Inc. -- Intel(R) Iris(TM) Graphics 6100
  • webgl2Version: 4.1 INTEL-10.25.17
  • webgl2WSIInfo: CGL
  • windowLayerManagerRemote: True
  • windowLayerManagerType: OpenGL
  • windowUsingAdvancedLayers: False

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
Pkshadow
  • Top 10 Contributor
920 solutions 12055 answers

SAFE MODE

In Firefox Safe mode these changes are effective:

  • all extensions are disabled (about:addons)
  • default theme is used (no persona)
  • userChrome.css and userContent.css are ignored (chrome folder)
  • default toolbar layout is used (file: localstore-safe.rdf)
  • Javascript JIT compilers are disabled (prefs: javascript.options.*jit)
  • hardware acceleration is disabled (Options > Advanced > General)
  • plugins are not affected
  • preferences are not affected

TEST

SAFE MODE *https://support.mozilla.org/kb/Safe+Mode *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes In Firefox Safe mode these changes are effective: *all extensions are disabled (about:addons) *default theme is used (no persona) *userChrome.css and userContent.css are ignored (chrome folder) *default toolbar layout is used (file: localstore-safe.rdf) *Javascript JIT compilers are disabled (prefs: javascript.options.*jit) *hardware acceleration is disabled (Options > Advanced > General) *plugins are not affected *preferences are not affected TEST
cor-el
  • Top 10 Contributor
  • Moderator
16400 solutions 147969 answers

Yes. That is how Full Screen mode works on Mac. If the code in userChrome.css is working for you then use it because the Old Lion Fullscreen extension that was previously recommended no longer woks like you noticed.

I don't know if this will be fixed in OS X 10.13 or that it still behaves this way.

Yes. That is how Full Screen mode works on Mac. If the code in userChrome.css is working for you then use it because the Old Lion Fullscreen extension that was previously recommended no longer woks like you noticed. I don't know if this will be fixed in OS X 10.13 or that it still behaves this way.

Question owner

Pkshadow said

SAFE MODE In Firefox Safe mode these changes are effective:
  • all extensions are disabled (about:addons)
  • default theme is used (no persona)
  • userChrome.css and userContent.css are ignored (chrome folder)
  • default toolbar layout is used (file: localstore-safe.rdf)
  • Javascript JIT compilers are disabled (prefs: javascript.options.*jit)
  • hardware acceleration is disabled (Options > Advanced > General)
  • plugins are not affected
  • preferences are not affected
TEST

Thank you for your reply. Unfortunately, that description of Safe Mode isn't of much help in this particular situation. Thanks for trying to help, though.

''Pkshadow [[#answer-1057395|said]]'' <blockquote> SAFE MODE *https://support.mozilla.org/kb/Safe+Mode *https://support.mozilla.org/kb/Troubleshooting+extensions+and+themes In Firefox Safe mode these changes are effective: *all extensions are disabled (about:addons) *default theme is used (no persona) *userChrome.css and userContent.css are ignored (chrome folder) *default toolbar layout is used (file: localstore-safe.rdf) *Javascript JIT compilers are disabled (prefs: javascript.options.*jit) *hardware acceleration is disabled (Options > Advanced > General) *plugins are not affected *preferences are not affected TEST </blockquote> Thank you for your reply. Unfortunately, that description of Safe Mode isn't of much help in this particular situation. Thanks for trying to help, though.

Question owner

cor-el said

Yes. That is how Full Screen mode works on Mac. If the code in userChrome.css is working for you then use it because the Old Lion Fullscreen extension that was previously recommended no longer woks like you noticed. I don't know if this will be fixed in OS X 10.13 or that it still behaves this way.

Thank you for you reply. That is unfortunate. The presence of the 'Hide Toolbars' option makes me wonder if this is expected behaviour, or just a bug that is (hopefully) going to be fixed.

I will continue to use the code in userChrome.css, and maybe try to modify it myself to work better until someone creates a Quantum-compatible extension that does this.

Again, thank you for chiming in.

''cor-el [[#answer-1057584|said]]'' <blockquote> Yes. That is how Full Screen mode works on Mac. If the code in userChrome.css is working for you then use it because the Old Lion Fullscreen extension that was previously recommended no longer woks like you noticed. I don't know if this will be fixed in OS X 10.13 or that it still behaves this way. </blockquote> Thank you for you reply. That is unfortunate. The presence of the 'Hide Toolbars' option makes me wonder if this is expected behaviour, or just a bug that is (hopefully) going to be fixed. I will continue to use the code in userChrome.css, and maybe try to modify it myself to work better until someone creates a Quantum-compatible extension that does this. Again, thank you for chiming in.
cor-el
  • Top 10 Contributor
  • Moderator
16400 solutions 147969 answers
See also: * https://github.com/nuchi/firefox-quantum-userchromejs