m.winner.co.il - The site is endlessly loading

[webcompat-bot]

URL: https://m.winner.co.il/home

Browser / Version: Firefox Mobile 70.0
Operating System: Android 8.0.0
Tested Another Browser: Yes

Problem type: Site is not usable
Description: keep loading all the time and not usable
Steps to Reproduce:
Loading all the time

Browser Configuration

• None

From webcompat.com with ❤️

[cipriansv]

Thanks for the report.
I was indeed able to reproduce the issue. The site is endlessly loading.

Tested with:
Browser / Version: Browser / Version: Firefox Preview Nightly 191109 (🦎: 72.0a1-20191105095755), Chrome Mobile 78.0.3904.62
Operating System: Huawei P10 (Android 9.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Preview Nightly:

And this is the web page displayed in Chrome:

[ksy36]

The issue seems to be that the transitionend event is not fired here:

    $('#pageHolder section.currentPage').on('webkitTransitionEnd transitionend', function () {
      $('#pageHolder section.currentPage').length > 0 && $('#pageHolder section.currentPage').mobileScroller(),
      $(this).removeClass('currentPage'),
      Apollo.MobileApp.App.pageChangeFinish(),
      Apollo.MobileApp.App.bindJumpingToFooter()
    })

Tried to reproduce it https://codepen.io/ksy36/pen/RwwePeB , seems that the problem is intermittent an it also happens in Chrome.

Maybe @karlcow has some thoughts on this

[karlcow]

https://bugs.chromium.org/p/chromium/issues/detail?id=999895
https://bugzilla.mozilla.org/show_bug.cgi?id=1578121

@ksy36 seems to be close.
whatwg/compat#118 (comment)

That said this test seems to work every single time.
https://output.jsbin.com/gowejow/quiet

[karlcow]

Recently there was also
#19363 (comment)

[ksy36]

Thanks @karlcow. It seems to be a race condition.

So here $pgSection (an array with nodes) is appended to a div with id #pageScroller.
And also firstPage class is added to every node in that array:

changePageSuccess: function (e, t, n) {
...
     $pgSection = Apollo.MobileApp.App.$prestinePage, 
      $('#pageScroller').append($pgSection),
      $('#pageHolder section.page').eq(0).hasClass('initPage')) {
        $pgSection.addClass('firstPage');
        var o = Apollo.MobileApp.Config.configJSON.overrides;
        Apollo.MobileApp.Overrides.fireOverride(o)
      } else $pgSection.addClass('newPage');
      return Apollo.MobileApp.App.renderAlerts($pgSection),
      Apollo.MobileApp.App.customisePage(),
      Apollo.MobileApp.Config.currentPage = n && n.currentPage && null != n.currentPage ? n.currentPage : $pgSection.attr('data-page'),
      Apollo.MobileApp.Utils.pushHistory(Apollo.MobileApp.Config.currentPage),
      Apollo.MobileApp.Tabs.updateSelectedTab(Apollo.MobileApp.Config.currentPage),
      Apollo.MobileApp.App.transitionPages(),
      Apollo.MobileApp.App.clearTouchEvents(),
      $pgSection
    },

One of the nodes in $pgSection is $('#pageHolder section.currentPage'), which is later targeted in Apollo.MobileApp.App.transitionPages() and has a transitionend listener:

$('#pageHolder section.page:last')
       .addClass('currentPage')
       .removeClass('newPage')
       .removeClass('firstPage'),

      $('#pageHolder section.currentPage').on('webkitTransitionEnd transitionend', function () {
        $('#pageHolder section.currentPage').length > 0 && $('#pageHolder section.currentPage').mobileScroller(),
        $(this).removeClass('currentPage'),
        Apollo.MobileApp.App.pageChangeFinish(),
        Apollo.MobileApp.App.bindJumpingToFooter()
      }) 

If I wrap the above chunk of code in setTimeout, then transitionend event fires in Firefox.
Logged a timer in between adding and removal of firstPage class (which toggles opacity) and it's 25-33ms in Chrome and 6-8ms in Firefox. There is a lot of intermediate code between them, so I'm not sure what's causing the difference.

So this seems to be a race condition, where in Firefox a class is being added a removed almost immediately. I guess we should contact the site to see if they could fix this.