Fancybox lightbox modals display as tiny white boxes on Android tablets

[rafaehlers]

Recommendation:

Investigate Fancybox rendering issues on Android tablets with Chrome, focusing on:

• Viewport-based CSS sizing
• Timing of layout initialization
• Potential differences in rendering behavior between iOS and Android

Environment:

• Devices affected: Android tablets (tested on Chrome browser)
• Working as expected: PC, iPad
• Plugins involved: GravityView with Fancybox lightbox entry links

---

Issue:

The Fancybox modal works fine on PC and iPad, but fails on Android tablets.

---

Technical Details:

• The .fancybox__content div is incorrectly sized to 72px × 72px instead of the expected responsive dimensions (approximately 784px × 773px).
• The modal structure loads, but the content collapses.
• Changing the device orientation triggers a layout recalculation that fixes the sizing.

Root Cause: Likely a CSS viewport calculation issue or timing bug with how Fancybox initializes dimensions on Android Chrome.

---

Steps to Reproduce:

1. Create a GravityView with entry links set to open in a lightbox.
2. Open the page on an Android tablet using Chrome.
3. Click the “View” button — modal opens but content is tiny.
4. Rotate the device — content appears correctly.

---

Expected Behavior:

The modal should open at the correct size immediately, without needing an orientation change.

---

Temporary JavaScript Fix:

We implemented this JavaScript snippet to mitigate the issue until a permanent fix is available:

// Temporary Fix for GravityView Fancybox Android tablet bug
// This fix will automatically disable itself if the issue is resolved
(function($) {
  var KNOWN_BROKEN_VERSIONS = ['2.42'];
  var FIX_VERSION = '1.0';

  function isAndroid() {
    return /Android/i.test(navigator.userAgent);
  }

  function isTablet() {
    return window.screen.width > 600 || window.innerWidth > 600;
  }

  if (!isAndroid() || !isTablet()) {
    return;
  }

  function isBugPresent() {
    var $gravityviewCSS = $('link[href*="gravityview"]');
    var hasOldFancyboxCSS = $('link[href*="fancybox"]').length > 0;
    return hasOldFancyboxCSS;
  }

  if (!isBugPresent()) {
    console.log('GravityView Android fix: Bug appears to be resolved, skipping fix');
    return;
  }

  function fixFancyboxContent() {
    setTimeout(function() {
      var $content = $('.fancybox__content');
      var $container = $('.fancybox__container');
      var $iframe = $('.fancybox__iframe');

      if ($content.length && $container.length) {
        var currentWidth = $content.width();
        var currentHeight = $content.height();

        var isGravityViewModal = $iframe.length && $iframe.attr('src') &&
          $iframe.attr('src').includes('gravityview');

        if (isGravityViewModal && (currentWidth < 200 || currentHeight < 200)) {
          console.log('GravityView Android Fix v' + FIX_VERSION + ': Applying temporary sizing fix');

          var viewportWidth = window.innerWidth;
          var viewportHeight = window.innerHeight;
          var targetWidth = Math.min(800, viewportWidth * 0.9);
          var targetHeight = Math.min(600, viewportHeight * 0.8);

          $content.attr('data-android-fix-applied', FIX_VERSION).css({
            'width': targetWidth + 'px',
            'height': targetHeight + 'px',
            'min-width': '300px',
            'min-height': '400px'
          });

          if ($iframe.length) {
            $iframe.css({
              'width': '100%',
              'height': '100%'
            });
          }

          $content[0].offsetHeight;
          $(window).trigger('resize');
        }
      }
    }, 100);
  }

  if (typeof Fancybox !== 'undefined') {
    $(document).on('click', '.gravityview-fancybox', function() {
      setTimeout(fixFancyboxContent, 50);
      setTimeout(fixFancyboxContent, 150);
      setTimeout(fixFancyboxContent, 300);
    });
  }

  var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
      if (mutation.type === 'childList') {
        mutation.addedNodes.forEach(function(node) {
          if (node.nodeType === 1 &&
            (node.classList.contains('fancybox__container') ||
            $(node).find('.fancybox__container').length)) {
            fixFancyboxContent();
          }
        });
      }
    });
  });

  observer.observe(document.body, {
    childList: true,
    subtree: true
  });

  setInterval(function() {
    if ($('.fancybox__container').length && $('.fancybox__container').is(':visible')) {
      var $content = $('.fancybox__content');
      if ($content.length && ($content.width() < 200 || $content.height() < 200)) {
        fixFancyboxContent();
      }
    }
  }, 500);

  $(window).on('orientationchange resize', function() {
    if ($('.fancybox__container').length && $('.fancybox__container').is(':visible')) {
      setTimeout(fixFancyboxContent, 100);
    }
  });

  console.log('GravityView Android fix v' + FIX_VERSION + ' loaded (temporary workaround)');
  console.log('This fix will automatically disable if GravityView resolves the Android tablet issue');

  setTimeout(function() {
    if ($('.fancybox__content[data-android-fix-applied]').length === 0) {
      console.log('GravityView Android fix: No fixes applied recently, issue may be resolved');
    }
  }, 60000);
})(jQuery);

[rafaehlers]

https://secure.helpscout.net/conversation/2996172358/65180