Parallax jitter bad performance

[yuvadm]

Most basic usage of parallax.js is giving me weird behavior. I'm getting white background jitter above and below the parallax background when scrolling. Example: http://gfycat.com/ThoughtfulAcceptableCaribou

I'm using Firefox 36.0.1 on OS X, but this also reproduces on Safari + OS X and Firefox + Linux. Chrome seems to work fine everywhere.

[alexander-young]

I'm getting the same thing. I thought the "Bleed" just needed to be adjusted, but that didn't seem to work either.

[yuvadm]

Using 50 pixel bleed seems to fix most of the bad performance, but aggressive scrolling still shows jitter.

[atavernor]

You can improve the smoothness slightly by applying the translation via an alteration to the transform3d's y value rather than the top: on the slider. I find this makes it quite smooth in Chrome. Safari will always stutter somewhat due to its lazy scroll reporting, particularly with foreground content in the parallax div it seems.

[mikegreiling]

I'm wary of relying too heavily on transform3d to handle the parallax effect directly since many users have noted it causing odd behavior in certain situations with certain browsers, and I've even recommended removing it entirely in certain cases.

As @yuvadm noted, the bleed attribute was my hacky solution to the poor scrolling performance in Safari et al. When used properly it will prevent the hard edges from jittering, but the background will still have trouble keeping up in Safari.

I don't know currently of any way around this, but I would be open to suggestions.

[atavernor]

@mikegreiling I totally agree with your reasoning regarding transform3d, hence I offered it as a suggestion to users rather than a pull request. It can, however, be a useful technique subject to proper situational testing. This is particularly true in circumstances where all adjacent content is transparent and so the bleed option is not appropriate and also with "difficult" foreground content on occasions.

The Safari problem is, as far as I can tell, pretty intractable and no amount of refactoring is going to help with the scroll reporting behavior, short of using scroll hijacking which comes with a whole new set of problems and limitations in the general use case.

[yuvadm]

@atavernor can you post a patch that I can try out?

[atavernor]

@yuvadm We made wholesale changes to the plugin for our application but the translate part just needs applying to the render function as follow - I have commented out the original code and labelled the new code with ** at the start of the lines - obviously remove this. Apologies for the lack of a proper diff but I am on my iPad as I write this. I also doubt that the rounding of the pixel values has any effect but it was a case of try anything and it didn't show any adverse indications.

render: function() {
var scrollTop = Parallax.scrollTop;
var scrollLeft = Parallax.scrollLeft;
var overScroll = this.overScrollFix ? Parallax.overScroll : 0;
var scrollBottom = scrollTop + Parallax.winHeight;

  if (this.boxOffsetBottom > scrollTop && this.boxOffsetTop < scrollBottom) {
    this.visibility = 'visible';
  } else {
    this.visibility = 'hidden';
  }
  this.mirrorTop = this.boxOffsetTop  - scrollTop;
  this.mirrorLeft = this.boxOffsetLeft - scrollLeft;
  this.offsetTop = this.offsetBaseTop - this.mirrorTop * (1-this.speed);
  this.$mirror.css({
   transform: 'translate3d(0px, 0px, 0px)',
    visibility: this.visibility,
    top: Math.round(this.mirrorTop - overScroll),
    left: this.mirrorLeft,
    height: this.boxHeight,
    width: this.boxWidth  + this.boxWidthComp 
  });

** var transl = 'translate3d( 0px,' + Math.round(this.offsetTop) +'px, 0px)';
this.$slider.css({
position: 'absolute',
//Original Plugin code that caused the flicker on the preview site
//transform: 'translate3d(0px, 0px, 0px)',
//top: Math.round(this.offsetTop),
** top:0,
** transform: transl,
left: this.offsetLeft,
height: this.imageHeight,
width: this.imageWidth
});
}

[BenRacicot]

Hey guys, any updates on this since March? Also its most likely preferable to use the html method to invoke a parallax bg. In that case is there a way to apply the flicker fixes to all instances of parallax?

I've implemented the code fix ^ to the library but the flickering is exactly the same. Also I cannot see a difference in the flickering. The bleed solution is acting really strange and interfering with surrounding divs. Any ideas?

[atavernor]

@BenRacicot If you are using bleed, the surrounding div's need to have a solid background color and you must ensure that the parallax image is behind them in z-index terms.

I'm not sure what you mean by interfering but if you mean that the bleed is overlapping them then this will be the cause. The idea of the bleed area is just to hide the actual top and bottom edges of the parallax image where the redraw raster flicker is most noticeable.

The translate above solution does not guarantee flicker free operation and it depends on your situation. We have found that some images cause flicker while some do not without any reasonable explanation. One thing for sure is that Safari consistently displays the worst flicker as I outlined above.

[hsagulo]

Hi Guys, still doesn't resolved? still flickering on my end.

[klevismiho]

I've fixed it with a bleed of 50.

[wstoettinger]

there has recently been merged a performance improvement, please check it out!
closed antiquated issue for cleanup. if this is still rellevant, feel free to reopen.