Firefox浏览器中Fotorama原生全屏导航按钮消失问题求助

Hey Kevin, sorry to hear you're stuck with this Firefox-specific glitch in Fotorama's native fullscreen mode. Let's break down what's going on and walk through some fixes:

What's Causing This? #

When you use data-allowfullscreen="native", Firefox's native fullscreen implementation can sometimes clash with Fotorama's UI rendering. Unlike other browsers, Firefox might suppress non-native UI elements (like Fotorama's nav arrows and exit button) when entering native fullscreen, leaving you only with keyboard shortcuts and image swipes to navigate.

Solutions to Try #

1. Switch to Fotorama's Custom Fullscreen Mode

The easiest fix is to ditch browser-native fullscreen and use Fotorama's built-in system instead—this is more consistent across browsers. Just update the attribute value:

<div class="fotorama" data-width="950" data-max-width="100%" data-max-height="97%" data-allowfullscreen="true">
  <!-- Your images here -->
</div>

2. Force UI Elements to Show with Firefox-Specific CSS

If you need to stick with native fullscreen, add this CSS to override Firefox's default behavior and keep Fotorama's controls visible:

/* Target only Firefox */
@-moz-document url-prefix() {
  /* Ensure navigation wrap and fullscreen icon stay visible in fullscreen */
  .fotorama--fullscreen .fotorama__nav-wrap,
  .fotorama--fullscreen .fotorama__fullscreen-icon {
    display: block !important;
    z-index: 9999 !important;
    position: relative !important;
  }
}

This forces the critical UI elements to render on top of the native fullscreen view.

3. Update Fotorama to the Latest Version

Older versions of Fotorama might have unpatched compatibility issues with Firefox's native fullscreen API. Check your current version against the latest release and update if needed.

4. Initialize Fotorama with Explicit JS Configuration

Instead of relying solely on HTML data attributes, initialize Fotorama with JavaScript to explicitly enable fullscreen controls:

$(document).ready(function() {
  $('.fotorama').fotorama({
    width: 950,
    maxWidth: '100%',
    maxHeight: '97%',
    allowfullscreen: 'native',
    // Force nav and exit icon to be visible in fullscreen
    fullscreen: {
      nav: true,
      icon: true
    }
  });
});

This ensures Fotorama explicitly renders the controls even in native fullscreen mode.

Your Original Code for Reference #

<td width="1008">
  <div class="fotorama" data-width="950" data-max-width="100%" data-max-height="97%" data-allowfullscreen="native"> 
    <img src="../../images/1979/02/1979-02-1.jpg"> 
    <img src="../../images/1979/02/1979-02-2-3.jpg"> 
    <img src="../../images/1979/02/1979-02-4-5.jpg"> 
    <img src="../../images/1979/02/1979-02-6-7.jpg"> 
    <img src="../../images/1979/02/1979-02-8-9.jpg"> 
    <img src="../../images/1979/02/1979-02-10-11.jpg"> 
    <img src="../../images/1979/02/1979-02-12-13.jpg"> 
    <img src="../../images/1979/02/1979-02-14-15.jpg"> 
    <img src="../../images/1979/02/1979-02-16-17.jpg"> 
    <img src="../../images/1979/02/1979-02-18-19.jpg"> 
    <img src="../../images/1979/02/1979-02-20-21.jpg"> 
    <img src="../../images/1979/02/1979-02-22-23.jpg"> 
    <img src="../../images/1979/02/1979-02-24.jpg">
  </div>
</td>

Start with solution 1 first—it's the simplest and most reliable for cross-browser consistency. If you must use native fullscreen, try solution 2 or 4 next.

内容的提问来源于stack exchange，提问作者Kevin