Bug of scrollbar with "scale to fit" script

Question

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

Answer 1

Hey Oliver,
Try wrapping another div around the #Stage div. I believe the scrollbars are appearing because with the script Animate will recalc the parent height, BUT if that parent is the body it doesn't adjust so it thinks it's the original height of your composition. So your HTML page will look like this:
<div style="height:1px; overflow:hidden;">
    <div id="Stage" class="EDGE-78729757">
          </div></div>
I found I had to apply the height property to get it to hide the scrollbar, but the value is irrevelant as it gets overwritten anyways by the script. Give that a shot.
Good luck!
Sarah