Iframe Compatibility Fix for Zen and Firefox Based Browsers

Introduction

Some Firefox-based browsers, such as Zen Browser, can display iframes incorrectly inside modals or responsive containers. This can cause spacing issues or cut off content. To solve this, we provide a small compatibility script that detects these browsers and adjusts iframe sizing automatically.

This guide will help you download the fix, add it to your theme, and make sure it works correctly with SureDash.

What This Fix Helps With

• Corrects iframe height and display issues in Zen Browser and other Firefox-based browsers.
• Works smoothly inside modals, responsive layouts, and dynamic content areas.
• Runs automatically once installed, with no extra setup needed.

Download the Script

You can download the compatibility script from this Gist:

https://gist.github.com/HimanshuSangale/46aeaa4159b8a5a438e98cf9e98a5c46

Save the file in your theme directory:

/wp-content/themes/your-theme/js/iframe-compatibility-fix.js

How to Set It Up in WordPress

Follow the steps below to load the script only when the SureDash frontend is active.

1: Add the script to your theme

Place the downloaded file in:

your-theme/js/iframe-compatibility-fix.js

2: Add the enqueue code

Add the code below to your theme’s functions.php file:

add_action( 'wp_enqueue_scripts', function() {
    if ( function_exists( 'suredash_frontend' ) && suredash_frontend() ) {
        wp_enqueue_script(
            'suredash-iframe-fix',
            get_template_directory_uri() . '/js/iframe-compatibility-fix.js',
            [],
            '1.0.0',
            true
        );
    }
});

If you are using a child theme, replace get_template_directory_uri() with:

get_stylesheet_directory_uri()

3: Clear cache

After saving, clear any WordPress or browser cache and reload your SureDash pages.

Supported Browsers

• Zen Browser
• Other Firefox-based browsers that show similar iframe issues

The script automatically detects these browsers and applies the fix.

Tips for Testing

• Open any SureDash modal that contains an iframe and check if the content displays fully.
• Test on both desktop and mobile views.
• Test on Zen Browser and the latest Firefox release.

Troubleshooting

• If the iframe still looks incorrect, confirm the script path is correct.
• Make sure caching plugins or CDN caches are cleared.
• If using a child theme, confirm you updated the directory function.

Conclusion

The iframe compatibility fix is a simple way to make SureDash display correctly on Zen Browser and other Firefox-based browsers. Once installed, it works automatically and does not require ongoing adjustments.

If you need any help setting this up or notice any remaining display issues, feel free to reach out to our support team. We are always happy to assist.