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

    Reveal.js widget issue in Chrome

    noelwhite

      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">
          <section>
            <img width="500px;"
                 height="500px;"
                 src="http://pictures.com/demo/pic1.png"
                 alt="pic1" />
          </section>
          <section>
            <img width="500px;"
                 height="500px;"
                 src="http://pictures.com/demo/pic2.jpg"
                 alt="pic2" />
          </section>
          <script src="https://cdn.com/lib/head.min.js"></script>
          <script src="https://cdn.com/lib/reveal.min.js"></script>
          <script>
            Reveal.initialize({
              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'
           });
          </script>
        </div>
      </div>
      

      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
          noelwhite

          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);

            parentIframe.each(function(){

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

                $j(this).height(iframePadding);

                return false;

              }

            });

          }

           

          setTimeout(setWidgetIframeHeight,100);