Question

我有一个大图像作为背景图像，我减小了滚动的大小，同时我也修改了背景位置。

不幸的是我在Chrome和Safari中发现了问题。在我开始滚动时，在这些浏览器中，图像变得模糊。

我为这个问题尝试了很多解决方案，但没有运气。你知道什么是错的，或者其他什么方法可以帮助达到同样的效果？

JS

function promo_scroll() {
    var current_scroll = jQuery(window).scrollTop();
    var scale = 5;
    var window_height = jQuery(window).height();
    var window_width = jQuery(window).width();
    var correction = jQuery('#header-wrapper').height()-500;

    if(scale*((1-(current_scroll/window_height))) > 1 && (window_width/window_height >= 198/119)) {
        jQuery('#custom-header').removeAttr('data-top');

        jQuery('.container').css({
            'position'  : 'fixed',  
            'display' : 'block',
            'top': 0,
            'left': 0,
            'transform' : 'scale(' + scale*((1-(current_scroll/window_height))) + ')',
        });

        jQuery('.container:not(.content)').css('background-position', '0 ' + correction + 'px');


    } else if(window_width/window_height >= 198/119) {
        if (typeof jQuery('#custom-header').attr('data-top') == 'undefined'){
            jQuery('#custom-header').attr('data-top',jQuery('#custom-header').offset().top);
            jQuery('#content-wrapper').css('padding-top',jQuery('#custom-header').offset().top);
        }
        jQuery('.container').css({
            top : jQuery('#custom-header').attr('data-top')-current_scroll,
            'transform' : 'scale(1)',
        });
    }
    else{
        jQuery('#custom-header').removeAttr('data-top');
        jQuery('#content-wrapper').css('padding-top',0);

        jQuery('.container').css({
            'background-position': 'center top',
            'position'  : 'absolute',   
            'top': 0,
            'left': 0,
            'transform' : 'scale(1)',
        });
        jQuery('.container.content').css({
            'position' : 'absolute'
        });
    }
}

jQuery(document).on('click','#custom-header', function(){
    jQuery('html, body').animate({'scrollTop': jQuery('.l-grid-row').offset().top - jQuery('#main-header').outerHeight()},2500);
});

jQuery(document).ready(function(){
    promo_scroll();
});

jQuery(window).on('scroll', function(){
    jQuery('.container.content')[0].style.setProperty('background-position', jQuery(window).scrollTop() + 'px 50%', 'important');
    promo_scroll();
});

jQuery(window).on('resize', function(){
    jQuery('#custom-header').removeAttr('data-top');
    promo_scroll();
});

CSS

body {
    -webkit-font-smoothing: antialiased;
}

.container {
    height: 100%; 
    width: 100%;
    z-index: 6;
    will-change: transform;
filter: none; 
-webkit-filter: blur(0px); 
-moz-filter: blur(0px); 
-ms-filter: blur(0px);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
}

.container.content{
    z-index: 5;
    background-image:url('http://i.imgur.com/f68DPZG.jpg');
    background-position: left center;
    background-repeat: repeat-x;
}

#header-wrapper {
    display: none;
}

@media screen and (min-width: 767px) {
    #header-wrapper {
        display: block;
    }
}

@media screen and (min-aspect-ratio: 198/119) {
    .container {
        -webkit-transform: scale(5);
        -moz-transform: scale(5);
        transform: scale(5);
        background-size: 100% auto !important;
        background-position: center center !important;
    }
}

.spacing {
    height: 2000px;
}

HTML

<div id="header-wrapper" data-full-height-header="true">
    <div id="custom-header" class="container"></div>
    <div class="container content"></div>
</div>
<div class="spacing">
</div>

只有特定宽高比才能看到效果，因此请全屏查看链接：https://jsfiddle.net/4eod1ng5/3/embedded/#Result

更新经过多次测试，看起来问题只出现在OSX（Safari和Chrome）中 更新2：在linux中将我的chrome更新为51之后，出现了问题。

Answer 1

不幸的是，你的小提琴对我不起作用，我可以看到某种奇怪的东西，但是当我编辑它时，我无法运行小提琴。但是，在我脑海中运行代码：

您正在将缩放与模糊效果结合使用。当您使用比例5时，它不会重新初始化效果，而只会放大对象。我会尝试从一个大尺寸（宽度+高度= 500％）开始，而不是向下缩放（比例<1）而不是向上。

您也可以尝试使用背景图像转换容器而不是对象。在处理这样的问题时，这对我来说很有帮助。

Answer 2

我试过了jsFidle。我在这里看到的问题是因为图像分辨率低，尝试使用分辨率更高的图像

在Safari和Chrome中缩放后的模糊图像

2 个答案: