Safari和Chrome缩放后的模糊图像

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 ) Update 2:中，当我在linux中将我的chrome更新到51时，问题出现了。

Answer 1

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