在 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 和 Chrome）中 更新 2： 在我将我的 chrome 在 linux 中更新为 51 后，问题出现了。

Answer 1

不幸的是，您的小提琴对我来说效果不佳，我可以看到某种奇怪之处，但是当我编辑它时我无法运行小提琴。但是，在我的脑海中运行代码：

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

您也可以尝试使用背景图像转换容器而不是对象。这在处理此类问题时偶尔对我有所帮助。

Answer 2

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