Why the background is blinking if scrolled with mouse wheel?

Question

I want to create my own little solution to manipulate background image positions, but if I scroll by mouse wheel, then the background image is "blinking". Actually it is moved up, and then corrigated the position, and it shows like blinking.

How can I solve this problem?

Here is my HTML code:

<section class="parallax">
    <div class="parallax-item">
        any text
    </div>
    <div class="parallax-img-container" id="img1" style="background: url('https://upload.wikimedia.org/wikipedia/commons/3/3e/Example_of_night_photography_at_The_Garden_of_Five_Senses,_New_Delhi.JPG') 0px 0px; background-size: cover; border: 1px solid #000;"></div>
    <div class="parallax-item">
        any other text
    </div>
</section>

And here is the jQuery code:

$(function() {
    // set up the items height to the screen height
    var height = $(window).height();
    $('.parallax-item').height(height).css({'background':'#fff'});
    $('.parallax-img-container').height(height);
    // catch scroll event
    $(window).scroll(function() {
         if ( isScrolledIntoView('#img1') ) {
             $('#img1').css({'background-position':'0px '+parseInt( $(window).scrollTop() )+'px'});
         }
    });
});

Here is Scott Dowding's answer to this question with a little modification to detect item is visible or not:

function isScrolledIntoView(elem) {
    var $elem = $(elem);
    var $window = $(window);

    var docViewTop = $window.scrollTop();
    var docViewBottom = docViewTop + $window.height();

    var elemTop = $elem.offset().top;
    var elemBottom = elemTop + $elem.height();

    //return ((elemBottom > docViewBottom) || (elemTop < docViewTop));
    return (((elemTop <= docViewBottom) && (elemBottom >= docViewBottom)) || ((elemTop < docViewTop) && (elemBottom >= docViewTop) ));
}

So the background image is positioned well if I scroll by scrollbar in desktop computer. But it start "blinking" if I use mouse wheel to scroll. How can I resolve this problem?

UPDATE! Here is on the jsfiddle.net.

@Rvervuurt what if one day jsFiddle closes it's services? Rather suggest to put the relevant and minimal code to reproduce the issue **right into the question** - than on some external sites. — Roko C. Buljan, Aug 18 '15 at 09:43
@RokoC.Buljan Well, probably that "one day" this question is irrelevant anyway, since parallax should die yesterday, rather than today ;) It's useless to think about "the day a service maybe stops serving", since the same can happen to SO and any other website. Right now JSFiddle works, so you can use it without any trouble. — Rvervuurt, Aug 18 '15 at 09:46
guys, I created a jsfiddle, but there is working fine, no blinking. — netdjw, Aug 18 '15 at 09:49
@netdjw have you tried to set `position: static;` to `body`? — Roko C. Buljan, Aug 18 '15 at 09:56
@RokoC.Buljan yes, just now, but nothing happened. But maybe the smooth scroll will be the solution... — netdjw, Aug 18 '15 at 10:04
@netdjw Actually I'm not even sure what you're trying to build and why don't you use pure CSS — Roko C. Buljan, Aug 18 '15 at 10:13

score 0 · Answer 1 · answered Aug 18 '15 at 09:54

This seems to be only in Internet Explorer, which is a problem I've faced before. This code helped me;

<script>
    $(document).ready(function() {
    /* Internet explorer fixed background jitter fix */
      if(navigator.userAgent.match(/Trident\/7\./)) {
        $('body').on("mousewheel", function () {
          event.preventDefault();

          var wheelDelta = event.wheelDelta;

          var currentScrollPosition = window.pageYOffset;
          window.scrollTo(0, currentScrollPosition - wheelDelta);
      });
      }
     });
  </script>

Oh, and I should mention that it is (as far as I could find) because of "Smooth scrolling" in Internet Explorer. If you would turn that off, then it would work as intended. (Ref. http://answers.microsoft.com/en-us/ie/forum/ie11-iewindows8_1/choppy-static-background-using-smooth-scroll/8b53a32b-db21-4fa3-a61d-7732f3fc217a?auth=1)

score 0 · Answer 2 · edited May 23 '17 at 12:29

I found the answer, and thanks to Woopaa's answer start the thinking to the right way.

Need to use the smooth scrolling with jQuery Mouse Wheel Plugin and the simplr-smoothscroll plugin:

<script type="text/javascript" src="js/mousewheel/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/smoothscroll/simplr-smoothscroll.js"></script>
<script type="text/javascript">
$(function() {
    // initialize the smooth scroll plugin
    $.srSmoothscroll();

    // set up the items height to the screen height
    var height = $(window).height();
    $('.parallax-item').height(height).css({'background':'#fff'});
    $('.parallax-img-container').height(height);
    // catch scroll event
    $(window).scroll(function() {
         if ( isScrolledIntoView('#img1') ) {
             $('#img1').css({'background-position':'0px '+parseInt( $(window).scrollTop() )+'px'});
         }
    });
});
</script>

Why the background is blinking if scrolled with mouse wheel?

2 Answers2