Experiences and its use of iFrames

Cheetah Experiences uses a JS embed code or iframe to embed Experiences onto a customer web page. The reason we recommend iFrames is for performance, security and compatibility reasons. Customers can use fixed-size embed or responsive embed depending on their exact needs.

If it's a responsive iframe, customers are still given an option to specify the width and height which will determine the experience's initial dimensions while the page is loading, but will then adapt to give the viewer the best possible experience, no matter what type of device they’re using.

The issue with using 'display:none' (CSS) on an iFrame in Firefox

We have had instances where customers place the Experienes iframe inside an element with the display:none property set, then shortly after page load this is set to display:block (To reveal the experience). This transition causes a race condition between the visibility of our iFrame on the customer's website and Uniform's initialization logic failing to execute in Firefox (This causes the form not not display correctly or become inactive to users).

This is a known issue in Mozilla Firefox https://bugzilla.mozilla.org/show_bug.cgi?id=548397 and at this point, we recommend our customers not to use display:none property.

Recommendation

In light of the issue highlighted above, we are unable to support the use of 'display:none' on our iFrames on Firefox and recommend that you fully display the iFrame when the hosting page loads so that your users have access to the experience.