Verschwommenes Bild nach Skalierung in Safari und Chrome

Question

Ich habe ein großes Bild als Hintergrundbild, und ich verkleinere die Größe beim Scrollen, und in der gleichen Zeit modifiziere ich auch die Hintergrundposition.

Leider habe ich Probleme in Chrome und Safari gefunden. In diesen Browsern, sobald ich anfange zu scrollen, wird das Bild verschwommen.

Ich versuchte viele Lösungen für dieses Problem, aber kein Glück. Hast du eine Idee, was falsch ist, oder eine andere Methode, die dir helfen kann, den gleichen Effekt zu erzielen?

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> 

Der Effekt nur mit einem bestimmten Seitenverhältnis, so überprüfen Sie bitte den Link in vollem Umfang nutzen zu sehen ist: https://jsfiddle.net/4eod1ng5/3/embedded/#Result

Update: Nach mehreren Testen es sieht aus wie das Problem nur in OSX (Safari und Chrome) Update 2 auftritt: Nachdem ich das Problem erschien mein Chrom 51 in Linux aktualisiert .

Answer 1

Ich versuchte die jsFidle. Das Problem, das ich hier sehe, ist, weil die Bilder niedrige Auflösung sind, versuchen Sie, höhere Auflösungen zu verwenden

Answer 2

leider funktioniert Ihre Geige nicht gut für mich, ich kann irgendeine Art von Seltsamkeit sehen, aber ich kann die Geige nicht laufen lassen, wenn ich redigiere es. Allerdings läuft der Code in meinem Kopf:

Sie verwenden Skala in Kombination mit einem Unschärfe-Effekt. Wenn Sie die Skalierung 5 verwenden, wird der Effekt nicht neu initialisiert, sondern nur das Objekt vergrößert. Ich würde versuchen, mit einer großen Größe (Breite + Höhe = 500%) zu beginnen und eher herunterskalieren (Maßstab < 1) als oben.

Sie können auch versuchen, den Container anstelle des Objekts mit dem Hintergrundbild zu transformieren. Das half mir gelegentlich, wenn ich mit solchen Problemen fertig werden musste.