JSFiddle - React, Tailwind, and code Playground

by Frits Steyn

HTML

<script src="jquery-parallax"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/skrollr/0.6.30/skrollr.min.js"></script>
<body>
<div  data-0="background-position:0px 0px;" data-100000="background-position:0px 50000px;" class="fixed1">
fixed background image is not "fixed" in Firefox because a transform has been added to this element.
</div>
<div class="more-content">
<p>Content div to push the page down</p>
</div>
<div class="fixed2">
fixed background image in this element remains "fixed", because no transform property exists on this element.
</div>
<div class="more-content">
<p>Content div to push the page down</p>
</div>
</body>

CSS

.fixed1, .fixed2 {
  color: #fff;  
  height: 173px;
  background-image: url(http://jeansmithartist.com/wp-content/uploads/2012/02/singers.jpg);
  background-attachment: fixed;
}
.fixed1 {
  transform: translateZ(0);
}
.more-content {
  height: 300px;
  background: #aaa
}

JavaScript

skrollr.init({
		forceHeight: false
	});