1 Reply Latest reply on Sep 19, 2013 11:28 AM by noelwhite

    Reveal.js widget issue in Chrome


      I am attempting to use the Reveal.js library to create a standard presentation widget for our users.  This basic presentation widget works nicely in Firefox and IE10.  In Chrome, I see the images load in, but a split-second later, the widget contents disappear.  Chrome Tools does not display any errors.  I have also inspected the HTML elements and compared them to what Firebug shows in Firefox.  They look basically the same, so it looks like the libraries are being loaded correctly.  I can also see the slides section of the HTML iterating through the slides in both cases.  So it is "running" in Chrome, it is just not displaying.


      Firefox screenshot:

      Chrome screenshot:


      My guess at this point is that it is a CSS issue, but I am not seeing any conflicts yet...and further stumped that it is happening in Chrome only.


      Here is the code snippet from my HTML widget:

      <link rel="stylesheet" href="https://cdn.com/lib/reveal.min.css">
      <link rel="stylesheet" href="https://cdn.com/lib/default.css" id="theme">
      <link rel="stylesheet" href="https://cdn.com/lib/zenburn.css">
      <div class="reveal">
        <div class="slides">
            <img width="500px;"
                 alt="pic1" />
            <img width="500px;"
                 alt="pic2" />
          <script src="https://cdn.com/lib/head.min.js"></script>
          <script src="https://cdn.com/lib/reveal.min.js"></script>
              controls: false,
              progress: false,
              history: false,
              center: false,
              loop: true,
              autoSlide: 5000,
              height: '580px',
              margin: 0,
              minScale: 1.0,
              maxScale: 1.0,
              // default/cube/page/concave/zoom/linear/fade/none
              transition: Reveal.getQueryHash().transition || 'page'

      All of the libraries and CSS are available on Github at hakimel/reveal.js · GitHub  The pictures used do not matter.


      Btw, I can run this same code (on a correctly formatted webpage) on an apache server and display the presentation from there just fine in Chrome.


      Has anyone experienced similar symptoms or have a suggestion?

        • Re: Reveal.js widget issue in Chrome

          This issue was that the parent iframe was sizing to 0px.  This was resolved by creating a function to resize the iframe.  A timer is set to call the resize function so that the contents have time to load in first.

          var iframePadding = "800";


          function setWidgetIframeHeight() {

            var parentWindow= window.parent.document;

            var parentIframe = $j("iframe",parentWindow);


              if($j(this).contents().find('#presentationContainer').length > 0){


                return false;