www.chessable.com - site is not usable

[gcp]

URL: https://www.chessable.com/

Browser / Version: Firefox Mobile 60.0 Operating System: Android 7.0 Tested Another Browser: Yes

Problem type: Site is not usable Description: Hamburger menu is not scrollable Steps to Reproduce: (needs free login) click hamburger menu in top left, try to scroll the menu. Specific to mobile version, works in Chrome.

From webcompat.com with ❤️

[softvision-sergiulogigan]

This is a fun one... Thanks for the report, @gcp ! Testing on a Huawei P10, Android 7.0 and Nightly 60. While connected to a PC and using Vysor, the menu is scrollable using the scrollwheel of the mouse. However, nor mouse drag or finger scrolling are working.

I suspect the Event Listeners of

<div class="slidebar slidebar--custom-fixed-width" id="mySlidebar" off-canvas="slidebar-1 left push" style="margin-left: -240px; display: block; transition-duration: 300ms; transform: translate(240px, 0px);">
    <picture>
        <source srcset="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" media="(min-width: 768px)">
        <img class="slidebar__logo" src="/img/chessable_white_trans.png" alt="Chessable Logo - Chess Openings Mastery">
    </picture>
    <ul id="slidebar__list" class="slidebar__list">
                    <li><a href="https://www.chessable.com/" class="slidebar__link slidebar__link--selected"><span class="fa fa-home fa-fw"></span> Home</a></li>
            <li id="slidebar-category_a"><a href="https://www.chessable.com/chess-books/" class="slidebar__link "><span class="fa fa-book fa-fw"></span> All Books</a></li>
                                                                        <li><a href="https://www.chessable.com/explore/" class="slidebar__link "><span class="fa fa-flask fa-fw"></span> Explore</a></li>
            <li><a href="https://www.chessable.com/analysis/" class="slidebar__link "><span class="fa fa-search fa-fw"></span> Analysis Board</a></li>
            <li><a href="https://www.chessable.com/import/" class="slidebar__link "><span class="fa fa-cloud-upload fa-fw"></span> Import PGN</a></li>
            <li><a href="https://www.chessable.com/chess-board-setup-editor/" class="slidebar__link "><span class="fa fa-pencil-square-o fa-fw"></span> Setup Position</a></li>
            <li><a href="https://www.chessable.com/newbook/" class="slidebar__link "><span class="fa fa-plus-square-o fa-fw"></span> New Book</a></li>
            <li id="slidebar-category_o"><a href="https://www.chessable.com/chess-openings/" class="slidebar__link "><span class="fa fa-search fa-fw"></span> Openings</a></li>
            <li id="slidebar-category_e"><a href="https://www.chessable.com/chess-endgames/" class="slidebar__link "><span class="fa fa-search fa-fw"></span> Endgames</a></li>
            <li id="slidebar-category_s"><a href="https://www.chessable.com/chess-strategy/" class="slidebar__link "><span class="fa fa-search fa-fw"></span> Strategy</a></li>
            <li id="slidebar-category_t"><a href="https://www.chessable.com/chess-tactics/" class="slidebar__link "><span class="fa fa-search fa-fw"></span> Tactics</a></li>
            </ul>
</div>

[karlcow]

In https://www.chessable.com/dist/app/app.min.1516078310043.js

$(document).ready(function () {
  iNoBounce.disable();
  var e = $('#mySlidebar'),
  o = $('.myCanvas'),
  t = new slidebars;
  t.init(),
  $('#slidebar-toggle').on('click touchend', function (e) {
    e.stopPropagation(),
    e.preventDefault(),
    closeNotificationsBox(),
    closeBubble(),
    t.toggle('slidebar-1')
  });
  function n(o) {
    e.is(o.target) || 0 !== e.has(o.target).length || t.close()
  }
  $(t.events).on('opening', function (t) {
    iNoBounce.enable(),
    $('html').addClass('html--slidebar-open'),
    o.addClass('myCanvas--disabled'),
    $('body').addClass('background-like-slidebar'),
    e.scrollTop(1)
  }),
  $(t.events).on('opened', function (e) {
    o.addClass('myCanvas--no-pointer'),
    $(window).on('click touchend', n)
  }),
  $(t.events).on('closing', function (e) {
    iNoBounce.disable(),
    $('body').removeClass('background-like-slidebar'),
    $('html').removeClass('html--slidebar-open'),
    o.removeClass('myCanvas--disabled')
  }),
  $(t.events).on('closed', function (e) {
    o.removeClass('myCanvas--no-pointer'),
    $(window).off('click touchend', n)
  }),
  $(window).on('resize-end', function (e) {
    $(window).width() > 768 && t.getActiveSlidebar() && t.close()
  }),
  e.on('mousewheel wheel DOMMouseScroll', function (e) {
    var o = e.originalEvent.wheelDelta || - e.originalEvent.detail;
    return !(this.scrollHeight <= $(this).outerHeight() + 2) && (!(o > 0 && $(this).scrollTop() <= 0) && !(o < 0 && $(this).scrollTop() + 2 >= this.scrollHeight - $(this).outerHeight()))
  });
  var r = null;
  e.on('scroll', function () {
    null !== r && clearTimeout(r),
    r = setTimeout(function () {
      var o = e.scrollTop(),
      t = e.innerHeight(),
      n = e[0].scrollHeight;
      if (0 === o) e.scrollTop(0.1);
       else if (o + t === n) {
        var r = n - t - 0.1;
        e.scrollTop(r)
      }
    }, 20)
  })
}),

e.on('scroll', function () { undefined event? @wisniewskit

[wisniewskit]

@karlcow, there are two reasons for this, neither of which are window.event (though that may have been nice, it might have spared me a longer diagnosis :)

The first is that when the hamburger menu opens, they add this CSS class to the html element (as shown in the script bits in the previous comment, defined in vendor.css):

.html--slidebar-open {
    overflow: hidden !important;
}

This causes Firefox to disallow any window scrolling, which makes sense. I'm not sure why they need it, but if they do then they should at least add an overflow:scroll to the hamburger menu element, so that the user can still scroll through its options:

#mySlidebar {
  overflow: scroll;
}

Regardless, there is more to the story. They also use an iNoBounce module, which breaks scrolling in this function in their vendor.js:

r = function(e) {
    for (var n = e.target; n !== document.body;) {
        var r = window.getComputedStyle(n);
        if (!r) break;
        if ("INPUT" === n.nodeName && "range" === n.getAttribute("type")) return;
        var i = r.getPropertyValue("-webkit-overflow-scrolling"),
            o = r.getPropertyValue("overflow-y"),
            a = parseInt(r.getPropertyValue("height"), 10),
            s = "touch" === i && ("auto" === o || "scroll" === o),
            u = n.scrollHeight > n.offsetHeight;
        if (s && u) {
            var l = e.touches ? e.touches[0].screenY : e.screenY,
                c = t <= l && 0 === n.scrollTop,
                f = t >= l && n.scrollHeight - n.scrollTop === a;
            return void((c || f) && e.preventDefault())
        } 
        n = n.parentNode
    }
    e.preventDefault()
},

That's because if you preventDefault on a touchmove event, you're telling the browser to stop the scroll entirely. Firefox always gets to that last e.preventDefault, which of course breaks the scrolling. That's because s will never be true, since -webkit-overflow-scrolling will never be touch on non-supporting browsers. Also, u seems to never be true, so the inside return statement never runs and preventDefault always happens.

However, since iNoBounce is only intended to be used on iOS, I think they would be much better off just disabling it on non-IOS devices. They should be able to detect whether they need it by checking for webkitOverflowScrolling support:

function haveWebkitOverflowScrolling() {
  let div = document.createElement("div");
  div.style.webkitOverflowScrolling = "touch";
  return !!window.getComputedStyle(div).overflowScrolling;
}

They can call this to determine whether they ought to in turn call iNoBounce.enable(), which in conjunction with the other fix should keep scrolling working on other browsers.

[karlcow]

ah! Thanks a lot @wisniewskit It helps… a lot… both for the future contact and for me. :) This is good stuff.

[gcp]

I'll try to reach the site owners and point them here.

[gcp]

Site owners responded that this has been fixed, and were highly appreciative of the good explanation given here.

Thanks all!

[karlcow]

Thanks a million times @gcp and the site owners.