刷新页面时,Chrome和Safari中的scale()变换不一致

时间:2013-06-20 15:10:47

标签: javascript jquery css3 css-transforms webkit-transform

我编写了下面的代码来缩放所有内容以及浏览器大小,以便所有内容始终可见(按比例放大或缩小版本)。

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

这段代码在Firefox中运行得很好,但Chrome和Safari中存在一些不一致的问题(我认为基于Webkit的浏览器,因为它们看起来行为相似)。

例如,如果我在浏览器窗口最大化的情况下加载页面,则在调整大小时可以很好地扩展。但是,如果我在调整浏览器大小时刷新页面,则会切掉一大块(即它以原始大小加载而不应用缩放)。但是,如果我在重新调整浏览器大小时重新加载页面(通过在地址栏中按Enter键),则所有内容都会正确显示并相应地进行缩放。但是,如果我按下刷新按钮,则会再次发生切断。

我已经尝试添加setTimeout(持续时间的各种值),但这不起作用。有谁知道如何解决这个问题?感谢。

1 个答案:

答案 0 :(得分:1)

没有回复表明没有人知道可能出错的地方。无论如何,经过多年的搜索,我找到了解决方案。

我必须在CSS中的#view上设置一个高度,以便每次都能正常运行。