bootstrap affix doesn't affix with parallax scrolling - CSS3 perspective + transform

Question

I am using the parallax method of using CSS3 perspective and transform scale. Doing this seems to break bootstrap affix. How do I get both working?

fiddle here

html

<main>

    <!-- remove BELOW to see affix working properly -->
    <div class="parallax">
        <div class="parallax-layer parallax-layer-back" id="parallax-image-architecture">
            background slow layer
        </div>

        <div class="parallax-layer parallax-layer-base"> 
    <!-- remove ABOVE to see affix working properly -->

            <div class="spacer">
            </div>

            <div class="affixable-wrapper">
                <nav id="navbar" class="navbar navbar-default affixable" role="navigation">            
                   <ul id="social-icons" class="nav">
                      <li>affix this navbar!
                      </li>
                   </ul>
                </nav>
            </div>

            <div>LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM LOREM IPSUM</div>

    <!-- remove BELOW to see affix working properly -->  
        </div>
    </div>
    <!-- remove ABOVE to see affix working properly -->

</main>

CSS

.parallax {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.parallax-layer-base {
  transform: translateZ(0);
}

.parallax-layer-back {
  transform: translateZ(-10px) scale(11);
}

@mixin parallax-image($image-path) {
  background-image: url($image-path);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

#parallax-image-architecture {
  /* 1255x837 */
  @include parallax-image("http://kpclgroup.com/wp-content/uploads/2014/03/architecture-drawing-og-making-the-house.jpg");
}





.spacer {
    height: 100px;
    background-color rgba(255,255,255,0.8);
}

#navbar.affix {
  position: fixed;
  top: 0;
  z-index: 100;
  width: 100%;
  box-shadow: 0px 6px 3px -3px #888;
}

JS

$('.affixable-wrapper').height($('.affixable-wrapper > .affixable').height());

$('.affixable-wrapper > .affixable').affix({
  offset: {
    top: $('.affixable-wrapper > .affixable').offset().top
  }
});

Answer 1

This is not a solution answer, but an analysis of what's going on.

When you use perspective, that element becomes a new stacking context, indicated by it becoming scrollable depending on its size and contents' size.

This results in the "normal" level scrolling position being different from the new stacking context's scrolling position... meaning the usual detected scroll position value that that you passed to .affix() doesn't actually get reached.

If you can somehow detect the new stacking context's scroll position, and feed that value into the affix function, then it may be possible.

But I've moved away from the perspective and 3d transform method, and instead favored setting a background element to absolute, detecting the scroll position, and using javascript to move the background at a fraction of the speed (or even negative speed). This method results in far less incompatibilities with bootstrap js functions. It also has the advantage of having only one variable/value that controls the speed (rather than multiple dependent values with the perspective 3d transform way).}

This is article explains it very simpley http://www.webdesignerdepot.com/2013/07/how-to-create-a-simple-parallax-effect/

This has the downside of using jquery .scroll() method, but you can mitigate the rapid multiple triggering with a timeout function described in this article http://www.karavas.me/jquery-window-scroll-timeouts/