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とクローム）で発生するように見えるテスト アップデート2後：私は問題が現れLinuxでは51に私のクロムを更新した後、 。

Answer 1

私はjsFidleを試しました。私がここに見る問題は、画像が低解像度で高解像度の画像を使用しようとしているからです

Answer 2

残念ながら、あなたのフィドルはうまくいきません。私は奇妙なことを見ることができます。それ。ただし、私の頭の中でコードを実行：

あなたはぼかし効果と組み合わせてスケールを使用しています。スケール5を使用すると、エフェクトは再初期化されませんが、オブジェクトのスケールアップのみが行われます。私は大きいサイズ（幅+高さ= 500％）から始めることを試み、スケールアップします（スケール< 1）。

背景イメージを使用してオブジェクトの代わりにコンテナを変換することもできます。このような問題に対処する際に私は時々役立った。