1584499 - Scroll anchoring causes trouble in eia.gov/todayinenergy

Status: RESOLVED DUPLICATE of bug 1586909

(Core :: Layout: Positioned, defect, P1)

Description

[Karl Dubost💡 :karlcow]

Initial reporter comment.

On EIA news page "Today in Energy", including the page of each news item, the scrolling behavior is messed up with an extreme amount of inertia. Even clicking on the scrollbar doesn't stop it! I've checked with Chromium and there is no such problem. Also, it may be recent (either website update or FF update), because I didn't notice such thing in previous visits some months ago.

1. Go to https://www.eia.gov/todayinenergy/
2. Scroll with a bit of speed once
3. Notice how the scroll continue, even sometimes without interrupting almost to the end of the page.

This seems partly related to this function

https://www.eia.gov/global/scripts/eia-scripts.min.js?v=1.1

given their source code, they seem to have struggled with it

var SocialSticker = function () {
  function SocialSticker() {
    _classCallCheck(this, SocialSticker);
    this.target = $('#sticker');
    this.hover(this.target);
    function position() {
      $('#sticker.positionable').position({
        of: $('.l-outer-wrapper'),
        my: 'left top',
        at: 'right top'
      });
      $('#sticker').offset({
        top: $(window).scrollTop() + $('header').height() + 2
      });
    }
    position();
    $('#sticker').hover(function (event) {
      //            $(this).stop(true,false).animate({right: '-125px', width: '160px'}, 'slow');
    }, function (event) {
      //            $(this).stop(true,true).animate({right: '0', width: '35px'}, 'slow');
    });
    $(window).scroll(function () {
      position();
    });
    $(window).resize(function () {
      position();
    });
    $('header').on('transitionend', function () {
      position();
    });
  }
  _createClass(SocialSticker, [
    {
      key: 'hover',
      value: function hover(target) {
        var $hoverTarget = $(target);
        var rolloverClass = 'hover';
        $hoverTarget.hover(function (event) {
          $(event.currentTarget).addClass(rolloverClass);
        }, function (event) {
          $(event.currentTarget).removeClass(rolloverClass);
        });
      }      /*
	        
	        
	                    function position() {
	                        $("#sticker.positionable").position({
	                            of: $(".l-outer-wrapper"),
	                            my: "left top",
	                            at: "right top"
	                        });
	                        $('#sticker').offset({top:$(window).scrollTop() + $('header').height()+2});
	                    }
	        
	                    position();
	                    $('#sticker').hover(function(event) {
	                        $(this).stop(true,false).animate({right: '-125px', width: '160px'}, 'slow');
	                    },function(event){
	                        $(this).stop(true,true).animate({right: '0', width: '35px'}, 'slow');
	                    });
	                    $(window).scroll(function() {
	                        position();
	                    });
	                    $(window).resize(function() {
	                        position();
	                    });
	                    $('header').on('transitionend', function() {
	                        position();
	                    });
	        
	        
	            }
	        */
      /*
	            events() {
	                this.sticker.hover(this.hoverEvent.bind(this));       
	            }
	            hoverEvent() {
	                this.header.toggleClass('show');
	                this.logo.toggleClass('show');
	                this.searchPanel.toggleClass('show');
	            } 
	        
	        
	        */

    }
  ]);
  return SocialSticker;
}();
exports.default = SocialSticker;
/*


	            function position() {
	              $( "#sticker.positionable" ).position({
	                of: $( "#outerX" ),
	                my: "left top",
	                at: "right top"
	              });
	              $('#sticker').offset({top:$(window).scrollTop()+10});
	            }
	         
	            position();
	        
	            $('#sticker').hover(function(event){
	               $(this).stop(true,false).animate({right: '-125px', width: '160px'}, 'slow');
	            },function(event){  
	                $(this).stop(true,true).animate({right: '0', width: '35px'}, 'slow');
	            });
	            $(window).scroll(function () {position();});
	            $(window).resize(function () {position();});


	    */
/***/
}),/* 8 */
/***/

which controls the position of social media icons.

The scroll on chrome doesn't have inertia, because the social media icons almost never disappears from the viewport (shorter feedback loop for the position?)

On Firefox they disappear and as soon as they are out of view, the scroll is switching to ghost mode, aka inertia scrolling by itself. because the social media icons don't come fast enough in the viewport.

The script from the site is bad.
BUT Firefox performs less well than Chrome on this.

putting the [qf] flag just in case.

Comment 1

[Karl Dubost💡 :karlcow]

And this is a performance profile showing the issue.
https://perfht.ml/2mfql2f

Comment 2

[Emilio Cobos Álvarez (:emilio)]

Which version of Gecko was this using? I suspect this is basically the same issue as bug 1561450, related to scroll anchoring.

Does it repro with scroll anchoring disabled?

Comment 3

[Karl Dubost💡 :karlcow]

emilio, I used 71.0a1 (2019-09-26) (64-bit)
it also reproduces in 71.0a1 (2019-09-27) (64-bit)

but it indeed doesn't reproduce with layout.css.scroll-anchoring.enabled: false

so bug 1561450 didn't fix it.

Comment 4

[Emilio Cobos Álvarez (:emilio)]

This was actually regressed by bug 1561450: https://hg.mozilla.org/mozilla-central/pushloghtml?fromchange=fce0b326cd318bf435d4e4c54ae331618059e073&tochange=571467ffd1d495f2028509a2667ef22441616ef6

Comment 5

[Emilio Cobos Álvarez (:emilio)]

Ok, I don't really know what to do about scroll anchoring anymore. This sucks.

Comment 6

[BugBot [:suhaib / :marco/ :calixte]]

Bugbug thinks this bug is a defect, but please change it back in case of error.

Comment 7

[Emilio Cobos Álvarez (:emilio)]

This only happens when you're not using WebRender, for more fun.

Comment 8

[Sean Voisen (:svoisen)]

Sounds very performance sensitive. Is this only on Linux? I can't reproduce this on my MacBook with or without WR enabled.

Comment 9

[Emilio Cobos Álvarez (:emilio)]

I suspect bug 1586909 will fix this. I only have a debug build so hard-ish to verify it's not just because my build doesn't scroll fast enough.

Comment 10

[Emilio Cobos Álvarez (:emilio)]

I can't repro on today's nightly, mind confirming that?

Comment 11

[Karl Dubost💡 :karlcow]

This is working for me! Thanks a lot emilio.