Missing content on page after transition

[mcblum]

We have been trying to figure out why half of some of our pages is missing and have discovered that adding the transitions to the routes.js file is what is causing it. The issue can be observed on our staging sever. In order to reproduce the error, visit this page (without any type of cache killing on) and refresh. Scroll down and you'll see that the content below the photo of Bill Clinton goes missing.

http://stage.nationalmachine.co/case-study/severs-fall-festival

In order to bring it back, scroll all the way to the bottom or resize the window and it will return. Any idea what might be causing that?

[homerjam]

I'm away from my machine right now but have noticed similar (sounding) issues that I think are to do with memory/paint limitations of the browser. I believe that the transitions cause the browser to render parts of the page differently. You can try using the will-change property of css to force the browser to fix this (similar to translateZ(0)).

[mcblum]

@homerjam Thank you for your reply! We're going to look at it right now.

[homerjam]

Here's a snippet I use occasionally - another problem I've had is with fixed elements not being drawn correctly.

    // Force repaint to correct page height
    $rootScope.$on('gsapifyRouter:enterSuccess', (event, element) => {
      let view = element.attr('ui-view');

      if (view === 'content') {
        let el = $document[0].body;
        let display = el.style.display;
        el.style.display = 'none';
        let trick = el.offsetHeight;
        el.style.display = display;

        $timeout(() => {
          element.addClass('enter-success');
        });
      }
    });