Pure CSS Parallax not working

I cannot for the life of me figure out why this is not working.

I have attached a working codepen example.

Here is the NOT working example:

As soon as i copy the code into my Ionic project nothing works. I place the code within the ion-content tag

Then the images dont show, and the parralax effect doesnt work at all.

Any ideas / help would be amazing! Thanks

Could you create a CodePen showing what you are trying to do that is NOT working?

Here you go, this is the NOT working example, thanks

Ok, this is going to be a bit of a long answer. So, using background-position: fixed makes the background scroll fixed relevant to it’s parent. In the markup you have crafted, it looks like ion-content is the parent, but in the rendered markup, it isn’t. A div with class scroll is added at runtime.

image

ion-content is the actual element doing the scrolling, so this isn’t doing what you are expecting. What you want is your divs to be children on ion-content and to move that scroll class up to the ion-content.

image

So, we’ll have to do something a bit hacky, but it doesn’t appear to have any negative side effects. You’ll want to do your own testing to make sure. What we’re going to do is create a directive and place it on ion-content that removes that extra div and moves the scroll class into ion-content. First, lets add an attribute to ion-content.

<ion-content parallax-fix>

Next, lets create our directive. Line by line, we are:

  1. Adding the scroll class to ion-content
  2. Cloning the content inside the extra div
  3. Removing the extra div
  4. Adding the content back to ion-content

Here is the directive:

.directive('parallaxFix',function(){
	return {
		link: function(scope, element, attrs) {
			element.addClass('scroll');

			var content = element.children().children().clone();

			element.children().remove();

			element.append(content);
		}
	}
});

Here is a CodePen: http://codepen.io/andrewmcgivery/pen/jWVbOE

Try it out and let me know!

Hi, thanks for the time to put this together :smile:

Just one quick question, the codepen you provided still seems to not be working?

As a reference it is supposed to do this when scrolling

Hm… my pen works fine for me… what about it is not working? Do you see any errors in the dev tools?

Your pen doesn’t work for me (using Chrome v47.0.2 latest for MAC) - think it might be a browser thing :frowning:

Issue seems to be the parallax doesnt work and it doesnt show all the images and there is huge white space.

So decided to try in Safari and FIreFox - and it works ok… [confused] … Just Chrome it wont work on???

However the original working Pen i created with no ionic included works fine on Chrome…

Do you see any errors in the dev tools?

I cant see any errors from within the codepen.

I have not yet added the code into my project yet, im purely looking at the pen.

Does it work for you in Chrome?

Hi again, just wondering if you have managed to look at that Chrome issue at all?