Web-bugs: www.eia.gov - site is not usable

[pierre-haessig]

URL: https://www.eia.gov/todayinenergy/

Browser / Version: Firefox 71.0
Operating System: Linux
Tested Another Browser: Yes

Problem type: Site is not usable
Description: unstoppable page scrolling
Steps to Reproduce:
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.

Browser Configuration

• None

_From webcompat.com with ❤️_

[softvision-sergiulogigan]

Thanks for the report!
I'm able to reproduce the issue on Windows also. Looks like, most of the time, the 3rd scroll wheel increment causes more scrolling than necessary.

Tested with:
Browser / Version: Firefox Nightly 71.0a1 (2019-09-23)
Operating System: Windows 10 Pro

Moving to Needsdiagnosis.

[karlcow]

That's a "cute" issue

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

    if (!(eventHandle = elemData.handle)) {
      eventHandle = elemData.handle = function (e) {
        // Discard the second event of a jQuery.event.trigger() and
        // when an event is called after a page has unloaded
        return typeof jQuery !== 'undefined' && jQuery.event.triggered !== e.type ?
        jQuery.event.dispatch.apply(elem, arguments)  : undefined;
      };

so far so good, this is catching the scroll event.
it uses

/*! jQuery v1.11.1 | (c) 2005, 2014 jQuery Foundation, Inc. | jquery.org/license */

I tried to capture a performance profile.
https://perfht.ml/2mfql2f

I wonder if it's the interaction with the social media icon which creates the issue.
yes that looks like it when I remove them from the DOM, the issue disappears.

And it seems chrome has no issue with it.

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 */
/***/

This part specifically.

    $(window).scroll(function () {
      position();
    });
    $(window).resize(function () {
      position();
    });

There might be a notion of performance. On Chrome, the social media icons do not really disappears from the viewport.

[karlcow]

Close as duplicate of https://bugzilla.mozilla.org/show_bug.cgi?id=1584499

[pierre-haessig]

Thanks for investigating this and forwarding it to Bugzilla! It's the first time I'd used webcompat.com and I find this tool really useful.

[karlcow]

Thanks to take the time to report. Really appreciated.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.