Ryan VanderMeulen [:RyanVM] Reporter
	Description • 8 years ago

Laggy and randomly disappears when scrolling. Kats says it's a known class of issues w/ APZ.

	Kartikaya Gupta (email:kats@mozilla.staktrace.com)
	Comment 1 • 8 years ago

They're using a scroll listener to change position:relative to position:fixed, when they should be able to get by using position:sticky instead.

	Hallvord R. M. Steen [:hallvors]
	Comment 2 • 8 years ago

Contact page: https://www.blackducksoftware.com/about/contact

Kats: I don't understand this bug completely yet. I'm pasting the whole JS emulation of position:sticky below just for reference, it doesn't really explain the effect I see.

First the logo is top left, then when you start scrolling down and I expect the logo to start disappearing upwards it will instead show up in the center, next to the word "Rookies" in the header or so, for a split second before the sticky effect kicks in. I'll attach a screenshot.

I guess they "should" use position:sticky instead of JS, but .. seriously, why does Firefox all of a sudden decide to paint a logo you're scrolling upwards *below* its original location? If that oddity wasn't happening, the page would work pretty smoothly with APZ, just as it did before.


(function ($) {
  $(document).ready(function () {
    var $sticky = $('.superhero-sticky');
    var css = $('<style>').attr({
      type: 'text/css'
    });
    css.append('.superhero-sticky.fixed{top:0; width:100%; z-index:1000; background-color:#fff}');
    $('body').append(css);
    $(window).bind('scroll', sp_sticky);
    function sp_sticky() {
      var offsetTop = $(window).scrollTop();
      if ($(window).width() <= 980) {
        $sticky.removeClass('fixed');
      }
      if (offsetTop > $sticky.offset().top && $(window).width() > 980) {
        $sticky.attr('data-offset-top', $sticky.offset().top);
        $sticky.css({
          position: 'fixed'
        });
        setTimeout(function () {
          $sticky.addClass('fixed');
          var h = $sticky.height() + parseInt($sticky.css('marginTop')) + parseInt($sticky.css('marginBottom'));
          var nm = parseInt($sticky.next().css('marginTop'));
          //$sticky.next().css({marginTop:(h+nm)+'px'});
        }, 1);
        $sticky.next().css({
          marginTop: $sticky.height() + 'px'
        });
        $(window).unbind('scroll', sp_sticky);
        $(window).bind('scroll', sp_unsticky);
      }
    }
    function sp_unsticky() {
      var offsetTop = $(window).scrollTop();
      if ($(window).width() <= 980) {
        $sticky.removeClass('fixed');
        var h = $sticky.height() + parseInt($sticky.css('marginTop')) + parseInt($sticky.css('marginBottom'));
        var nm = parseInt($sticky.next().css('marginTop'));
        $sticky.next().css({
          marginTop: (nm - h) + 'px'
        });
      }
      if (offsetTop <= $sticky.data('offset-top') && $(window).width() > 980) {
        $sticky.css({
          position: 'relative'
        });
        setTimeout(function () {
          $sticky.removeClass('fixed');
          var h = $sticky.height() + parseInt($sticky.css('marginTop')) + parseInt($sticky.css('marginBottom'));
          var nm = parseInt($sticky.next().css('marginTop'));
          //$sticky.next().css({marginTop:(nm-h)+'px'});
        }, 1);
        $sticky.next().css({
          marginTop: 0
        });
        //$sticky.removeClass('fixed');
        $(window).unbind('scroll', sp_unsticky);
        $(window).bind('scroll', sp_sticky);
      }
    }
  });
}) (jQuery);

	Hallvord R. M. Steen [:hallvors]
	Comment 3 • 8 years ago

Here's a screenshot of the effect I'm wondering if we can avoid..

	Kartikaya Gupta (email:kats@mozilla.staktrace.com)
	Comment 4 • 8 years ago

Oh interesting, I didn't see that when I first tried the page, but I can definitely see it now. That does seem like a Gecko bug, I'll look into it.

	Kartikaya Gupta (email:kats@mozilla.staktrace.com)
	Comment 5 • 8 years ago

Here's a video of the glitch. In QuickTime you can drag the slider frame by frame and you can see there's one frame where the header is out of place.

Next steps would be to get the layer dumps and see why the header is wrong for that one frame.

	Kartikaya Gupta (email:kats@mozilla.staktrace.com)
	Comment 6 • 8 years ago

I'm not convinced this is an APZ issue, as I see the same glitch using the down keyboard arrow to scroll. And I think I see it intermittently on Release (44) as well, although it's not as reproducible there.

	Alice0775 White
	Comment 7 • 8 years ago

I can also reproduce the glich on Google Chrome50.0.2638.0 as well as ESR38 on Windows7.

STR
1. Open https://www.blackducksoftware.com/open-source-rookies
2. After loading is finished, mouse hover the orange rectangle (this step is not necessary, but in order to easily reproduce)
3. Turn mouse wheel by one tick 

AR
the orange rectangle jumps moment

	Hallvord R. M. Steen [:hallvors]
	Comment 8 • 8 years ago

I confirm it also reproduces in Chrome. This code is first setting element.style.position to "fixed", then they set a 1ms timeout (!?) to add the class name "fixed". The class name says where they actually want the element rendered (note the top:0):

.superhero-sticky.fixed {
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
}

They should probably just add position:fixed to that CSS and simply add the classname immediately.

	Mike Taylor [:miketaylr]
	Comment 9 • 7 years ago

They've redesigned their header, so let's close this.