Parallax on Mobile - Still An Issue?

[emoryarts]

iosFix and androidFix seem to not do a single thing, are there other functions to allow it to scroll on mobile? Any help is appreciated, thanks!

[joehdodd]

Having this problem as well.

[cwildfoerster]

I fixed this problem myself. I am using parallax with the full HTML markup (parallax-window>parallax-slider>img) and the following code fixed my issues, just find the navigator.userAgent.match if blocks and replace them.

if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
  if (this.iosFix) {
    if (!this.imageSrc) {
      var img = this.$element.find('>.parallax-slider>img');
      if (img.length == 1) {
        this.imageSrc = img[0].currentSrc || img.attr('src');
        this.$element.find('>.parallax-slider').remove();
      }
    }
    if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
      this.$element.css({
        backgroundImage: 'url(' + this.imageSrc + ')',
        backgroundSize: 'cover',
        backgroundPosition: this.position
      });
    }
  }
  return this;
}

if (navigator.userAgent.match(/(Android)/)) {
  if (this.androidFix) {
    if (!this.imageSrc) {
      var img = this.$element.find('>.parallax-slider>img');
      if (img.length == 1) {
        this.imageSrc = img[0].currentSrc || img.attr('src');
        this.$element.find('>.parallax-slider').remove();
      }
    }
    if (this.imageSrc && this.androidFix && !this.$element.is('img')) {
      this.$element.css({
        backgroundImage: 'url(' + this.imageSrc + ')',
        backgroundSize: 'cover',
        backgroundPosition: this.position
      });
    }
  }
  return this;
}

[jcklpe]

I see this library recommended elsewhere but it doesn't seem very lightweight. Any suggestions for more lightweight solutions, has this project been superseded by anything newer? (most parallax articles are from 5 years ago when it first hit as a trend. I'm not looking for crazy scroll jacking, I just want a simple lightweight solution that I can easily integrate with data piped in with php variables)

[wstoettinger]

@emoryarts all the fixes do, is put the image as background when using data-attributes and return. if you disable the fix, the library does nothing and just returns. The usefulness of behavior might be up for discussion for future releases as it is unnecessary when using the html markup.

[wstoettinger]

@thedonquixotic this might not be the lightes solution, but its definitely very lightweight for its features and flexibility (7KB minified is pretty lightweight in my opinion).

The aim of this library is to create a "moving" parallax with as little footprint as possible while retaining as many features as necessary. If you are looking for a "static" parallax effect (i.e. pictures stay while you scroll), you can simply go with plain css.

If I understand your last sentence correctly, you are referring to data-attributes. Unfortunately it seems that plain data-attributes alone (without a javascript call) don't work anymore. This is a known bug and should be fixed in future releases.

[wstoettinger]

@thedonquixotic data-attributes work again since #201

[maheshdrag]

the easiest solution i found was:

1. Find these lines in the parallaxjs
   navigator.userAgent.match(/(iPod|iPhone|iPad)/)
   and
   navigator.userAgent.match(/(Android)/
2. Break the code by replacing them with:
   navigator.userAgent.match(/(iPod123/)
   navigator.userAgent.match(/(Android123)/

as user agent will never match these are never triggered and the parallax is loaded like in browser.

[AlanLozano]

the easiest solution i found was:

1. Find these lines in the parallaxjs
   navigator.userAgent.match(/(iPod|iPhone|iPad)/)
   and
   navigator.userAgent.match(/(Android)/
2. Break the code by replacing them with:
   navigator.userAgent.match(/(iPod123/)
   navigator.userAgent.match(/(Android123)/

as user agent will never match these are never triggered and the parallax is loaded like in browser.

You are the men! thanks! it works!!!