4 Replies Latest reply on Nov 16, 2015 12:06 AM by teemul58881642

    Bug of scrollbar with "scale to fit" script

    Oliv240

      Hi,

       

      I encounter a sort of bug with this nice script "scale to fit":

      http://sarahjustine.com/2013/04/08/create-scale-to-fit-projects-with-adobe-edge-animate/

       

      I create a simple animation composed of a single image (stage = 1024px X 3000px) with the script (see below) to test it: everything works, the animation is well scaled, BUT when I resize the browser, the scrollbar keeps his original size even if the height of the animation is very low.

       

      The bug concerns all the popular browsers (desktop and mobile* version) except chrome.

      * I use this meta: <meta name="viewport" content="width=device-width;">

       

      exemple:

      original height of the animation = 3000px

      height of the scrollbar = 3000px

      - - - - - - - - - - - - - - 

      height of the animation scaled = 600px

      height of the scrollbar don't change = 3000px

       

      I don't use any CSS, I simply publish the animation with EDGE CC (not 1.5).

       

      Someone could give me some hints for resolve this "bug" ?

       

      Oliver.

       

      sorry for my English, I'm French...

       

      A live example which seems to use this script (not of me),

      you can see the scrollbar bug if you resize the browser (with IE or Firefox)

      http://www.ryanterry.net/resume/html5/

       

      - - - - - - - the script (on.compositon.ready) - - - - - - -

       

      var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage

       

      sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage

      "transform-origin":"0 0",

      "-ms-transform-origin":"0 0",

      "-webkit-transform-origin":"0 0",

      "-moz-transform-origin":"0 0",

      "-o-transform-origin":"0 0"

      });

       

      function scaleStage() {

          var stage = sym.$('Stage'); // Set a reusable variable to reference the stage

          var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage

       

       

          var parentWidth = stage.parent().width(); // Get the parent of the stage width

          var stageWidth = stage.width(); // Get the stage width

          var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales

          var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales

       

       

      // Rescale the stage!

                 stage.css('transform', 'scale(' + rescale + ')');

          stage.css(  '-o-transform', 'scale(' + rescale + ')');

                 stage.css('-ms-transform', 'scale(' + rescale + ')');

          stage.css('-webkit-transform', 'scale(' + rescale + ')');

                 stage.css('-moz-transform', 'scale(' + rescale + ')');

          stage.css('-o-transform', 'scale(' + rescale + ')');

          parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts

      }

       

       

      // Make it happen when the browser resizes

      $(window).on('resize', function(){

                 scaleStage();

      });

       

       

      // Make it happen when the page first loads

      $(document).ready(function(){

          scaleStage();

      });

       

      - - - - - - - - - - - - - - - - - - - - -