1471099 - The text and images scroll jerkily when scrolling on Firefox Android.

Status: RESOLVED WORKSFORME

(Core :: Layout, defect, P3)

Description

[Karl Dubost💡 :karlcow]

Spin off of https://webcompat.com/issues/14056

This is related to performance. The issue can NOT be reproduced on Firefox Desktop RDM with Firefox Android UA.
The issue is visible on Firefox on Android. 
The scrolling is not janky on Chrome.

1. Go to  https://oneplus.net/uk/5t
2. Scroll

Text and images were jerky when scrolling. Chrome and Edge did not exhibit the same problem.


There is a reveal effect for images when they get into view. which is quite computing intensive. Due to this script.

          $(window).on('scroll', function () {
            var winWidth = $(window).width(),
                winHeight = $(window).height(),
                scrollTop = $(window).scrollTop();
            showFullImg(winWidth, winHeight, scrollTop);
            
          });
          $(window).on('scroll', function () {
            var winWidth = $(window).width(),
                winHeight = $(window).height(),
                scrollTop = $(window).scrollTop();
            $('.section-common, .section-subscribe').each(function () {
              var offsetTop = $(this).offset().top;
              if (offsetTop <= scrollTop + winHeight*2/3) {
                $(this).addClass('animated');
              }
            });
          });
          $(function () {
            // first screen
            $('.section-kv').addClass('animated');
            $(window).scroll();
          });
          function showFullImg (winWidth, winHeight, scrollTop) {
            $('.bg-mark').each(function () {
              var percent, originPercent,
                  rate = isMobile ? 0.3 : 0.5,
                  originWidthRate = isMobile ? 0.30 : 0.20,
                  offsetTop = $(this).offset().top,
                  diffHeight = (winHeight + scrollTop) - offsetTop;
              originPercent = originWidthRate * 100 + '%';
              if (offsetTop <= scrollTop + winHeight) {
                percent = (winWidth * originWidthRate - diffHeight * rate) / winWidth * 100 + '%';
                if (parseInt(percent) < -10) {
                } else {
                  // $(this).parent().find('.section-bg').css('background-position', 'center ' + (400-diffHeight*rate) + 'px');
                  // $(this).parent().css('background-position', 'center ' + (400-diffHeight*rate) + 'px');
                }
                if (parseInt(percent) <= 0) {
                  $(this).find('.left-mark, .right-mark').addClass('is-max');
                } else {
                  $(this).find('.left-mark, .right-mark').removeClass('is-max');
                }
                $(this).find('.left-mark, .right-mark').width(percent);
                // $(this).find('.top-mark').height(percent);
              } else {
                $(this).find('.left-mark, .right-mark').width(originPercent);
                // $(this).find('.top-mark').height(originPercent);
              }
              // if ($(this).find('.abc').size()) {
              //   // $(this).find('.abc').html(offsetTop + ':' + scrollTop + ':' + winHeight);
              //   $(this).find('.abc').html(percent);
              // } else {
              //   $(this).append('<span class="abc" style="position:absolute;color:red;left:25%;">'+ percent + '</span>');
              // }
            });
          }


https://perf-html.io/from-addon/marker-table/?hiddenThreads=2-3&markerSearch=&thread=4&threadOrder=0-2-3-4-1&v=3

Comment 1

[Hiroyuki Ikezoe (:hiro)]

(In reply to Karl Dubost :karlcow from comment #0)

> https://perf-html.io/from-addon/marker-table/?hiddenThreads=2-
> 3&markerSearch=&thread=4&threadOrder=0-2-3-4-1&v=3

Karl, I don't think this is a correct link.  Can you please put the correct one?

Comment 2

[Karl Dubost💡 :karlcow]

so weird. I just cut and paste the link. Let see. 
Ah! Understood… forgotten to click on "Share…". Doh!

Here the link done on responsive design mode. 
https://perfht.ml/2MYkerJ

And here on the device itself.
https://perfht.ml/2MZfTUZ

Comment 3

[David Bolter [:davidb] (NeedInfo me for attention)]

Botond is this related to the current work on scrolling/panning?

Comment 4

[Botond Ballo [:botond]]

Karl, is the issue you're referring to the responsiveness of the reveal effect itself as you scroll? Or the general scrolling behaviour of the page?

I tried scrolling the page in both Fennec and Chrome, and didn't notice much difference.

Comment 5

[Karl Dubost💡 :karlcow]

I was referring to the jankiness of the scroll (but indeed tried again today and it's a bit less obvious than it was). Specifically once we reached the bottom of the page and we try to scroll again.

The reveal effect is probably as bad in Chrome and Firefox.

Comment 6

[Bobby Holley (:bholley)]

(In reply to Karl Dubost :karlcow from comment #5)
> I was referring to the jankiness of the scroll (but indeed tried again today
> and it's a bit less obvious than it was). Specifically once we reached the
> bottom of the page and we try to scroll again.
> 
> The reveal effect is probably as bad in Chrome and Firefox.

I tried on Fennec vs Chrome, and didn't jankiness in the scrolling per se. Do you mean that the actually async panning janks, or just that the content stutters while panning?

However, it did seem like the image reveal stuttered more in Firefox than in Chrome. I amplified the testcase, which led me to bug 1473180 (a regression in FF 62, which we have yet to ship). Karl, is that what you're seeing, or is it different?

Comment 7

[Karl Dubost💡 :karlcow]

SO there's a kind of janky feeling for the top menu when scrolling down at first. 
But then the scrolling is becoming smooth.

And then yes the images which are being "widened" while scrolling with a stepping effect. (Trying to put into words what I see.)

Comment 8

[Bobby Holley (:bholley)]

(In reply to Karl Dubost :karlcow (away from 2018-07-10 to 2018-07-25) from comment #7)
> SO there's a kind of janky feeling for the top menu when scrolling down at
> first. 
> But then the scrolling is becoming smooth.

Hm, I'm not able to reproduce that on my Pixel 2 (though maybe I would on a slower device).

In any case, it seems like the site must have been fixed somehow since the original report, because we're talking about pretty subtle issues at this point. As such I'm tempted to resolve this bug as WFM given that there doesn't seem to be anything actionable beyond bug 1473180. WDYT?

Comment 9

[Bobby Holley (:bholley)]

Also note that you can get a snapshot of the from May at https://web.archive.org/web/20180521193419/https://www.oneplus.com/uk/5t

But I still don't see anything all that janky on my devices...

Comment 10

[Karl Dubost💡 :karlcow]

Probably my device is too old?

This is a SH-01G Sharp Aquos
from docomo with Android 4.4.4 
https://www.devicespecifications.com/en/model/cb14325b

SoC: Qualcomm Snapdragon 801 MSM8974AB
CPU: Krait 400, 2300 MHz, Cores: 4
GPU: Qualcomm Adreno 330, 578 MHz, Cores: 4
RAM: 2 GB, 933 MHz
Storage: 32 GB
Display: 5.5 in, IGZO, 1080 x 1920 pixels, 24 bit