Blurry image after scale in Safari and Chrome - css

Question

I have a big image as background-image, and I reduce the size on scroll, and in the same time I modify the background-position too.
Unfortunately I found problems in Chrome and Safari. In these browsers as soon as I start to scroll the image become blurry.
I tried many solutions for that problem, but no luck. Do you have idea what's wrong, or an other method what can help to achieve the same effect?
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>
The effect is visible only with a specific aspect ratio, so please check the link in full screen: https://jsfiddle.net/4eod1ng5/3/embedded/#Result
Update: After several testing it looks like the problem occurs only in OSX (Safari and Chrome)
Update 2: After I updated my chrome to 51 in linux the problem appeared.

Answer 1

unfortunately your fiddle does not work well for me, i can see some kind of weirdness, but i cannot run the fiddle when i edit it. however, running the code in my head:
you are using scale in combination with a blur effect. when you use scale 5, it will not re-initialize the effect, but only scale up the object. i would try starting with a big size (width + height = 500%) and rather scaling it down (scale < 1) than up.
you can also try transforming the container instead of the object with the background image. that helped for me occasionaly when dealing with problems like this.

Answer 2

I tried the jsFidle. the problem I see here is because the images are low resolution, try to use higher resolutions images