Transform scale() inconsistent in Chrome and Safari when refreshing page

Question

I wrote the code below to scale all content along with the browser size, so that all content is always visible (in a scaled-up or scaled-down version).

var docHeight = $(document).height();
var winHeight;
var zoomRatio;

function z(number) {
    var adjusted = number * zoomRatio;
    return adjusted;
}

fitWindow();
function fitWindow() {
    setTimeout(function(){
        winHeight = $(window).height();
        zoomRatio =  winHeight / docHeight;
        if (docHeight >= winHeight) {
            $('#view').css({
                transform: 'scale('+zoomRatio+')',
                'transform-origin': '0 0',
                '-moz-transform': 'scale('+zoomRatio+')',
                '-moz-transform-origin': '0 0',
                '-o-transform': 'scale('+zoomRatio+')',
                '-o-transform-origin': '0 0',
                '-webkit-transform': 'scale('+zoomRatio+')',
                '-webkit-transform-origin': '0 0',
                '-ms-transform': 'scale('+zoomRatio+')',
                '-ms-transform-origin': '0 0'
            });
        }
    }, 0);

    getAnchors();

    console.log(docHeight + ' ' + winHeight);
}

$(window).resize(fitWindow);

The code works really well in Firefox, but there are some inconsistencies in Chrome and Safari (Webkit-based browsers in general I assume since they both appear to behaving similarly).

For example, if I load my page with the browser window maximised, it scales nicely upon resize. However, if I refresh the page when the browser is resized, a large piece is cut off (i.e. it loads in original size without scale applied). But if I reload the page (by means of hitting the enter key in the address bar) when the browser is resized, everything displays correctly and scales accordingly. However, if I hit the refresh button, the cutting off happens again.

I have already tried adding a setTimeout (with various values for duration), but that does not work. Does anyone know how I can solve this issue? Thanks.

Answer 1

No replies indicate that no one knows what might be wrong. Anyway, after eons of searching, I have found the solution.

I had to simply set a height on #view in CSS for the scale to function properly every time.