Open Bug 1393460 Opened 2 years ago Updated 24 days ago

Keyboard scrolling is not smooth on Pinterest

Categories

(Web Compatibility :: Desktop, defect, P3)

defect

Tracking

(firefox55 affected, firefox56 affected, firefox57 affected, firefox66 affected, firefox67 affected, firefox68 affected, firefox69 affected, firefox70 affected, firefox71 affected)

Tracking Status
firefox55 --- affected
firefox56 --- affected
firefox57 --- affected
firefox66 --- affected
firefox67 --- affected
firefox68 --- affected
firefox69 --- affected
firefox70 --- affected
firefox71 --- affected

People

(Reporter: petruta.rasa, Unassigned)

Details

(Keywords: webcompat:contact-ready, Whiteboard: [gfx-noted][contactready] )

[Note]:
- The issue reproduces with pref apz.keyboard.enabled set to True or False

[Affected versions]:
- Firefox Nightly 57.0a1 2017-08-24
- Firefox 56.0b5
- Firefox 55.0.3 

[Affected platforms]: 
- Win 10 64-bit
- Ubuntu 16.04 64-bit
- Mac OS X 10.12

[Steps to reproduce]:
1. Open https://pinterest.com/ and login
2. Scroll up and down using arrow keys

[Expected result]:
- The scrolling is smooth, without any jerkiness or rendering issues.

[Actual result]:
- Jerkiness and trembling while scrolling with keyboard on Pinterest

[Regression range]:
- This also reproduces on Firefox 33.1, so not a regression.

[Additional notes]:
- Arrow key scrolling is smoother on Chrome
There's a keydown and keyup listener registered on the root <html> element that I suspect is messing with the scrolling. If I try to inspect those listeners, devtools fails me. Not sure why. If I save page locally I can't reproduce the problem on the copy (but also the copy doesn't have the keydown/keyup listeners, which adds weight to the theory that the listeners are the problem).
Whiteboard: [gfx-noted]
Component: Panning and Zooming → Desktop
Product: Core → Tech Evangelism
Priority: -- → P3
Whiteboard: [gfx-noted] → [gfx-noted][needsdiagnosis]
The issue is still reproducible for me.
So the issue is still going on. 
But I don't think this is an outreach issue.
So this should be probably moved to the right component. 

The black tick in the performance profile 
https://perfht.ml/2R1d4UG

relates to https://s.pinimg.com/webapp/js/entryChunk-www-148da77e63b8cc75dfc1.js
```js
  n.updateScrollPosition = w(function () {
    if (n.scrollContainer) {
      var e = n.scrollContainer.getScrollContainerRef();
      e && n.setState({
        scrollTop: B(e)
      })
    }
  }),

```

and/or

```js
  n.updateScrollPosition = w(function () {
    if (n.scrollContainer) {
      var e = n.scrollContainer.getScrollContainerRef();
      e && (n.setState({
        scrollTop: B(e)
      }), n.handleVirtualizationWindowUpdate())
    }
  }),
```

which also relates to r.handleScroll


Because they do lazy loading, they monitor the position in the page to load the subsequent images. Yes this is even jankier when there is a load event, which is probably less visible when scrolling by hand instead of the keys, because of the uncontinuous nature of scrolling by hand/mouse.
Flags: needinfo?(kats)
I'm not sure exactly what you're asking here. The black chunks in the content process main thread are the scroll listeners that run in response to the scroll event. From the profile they seem to be pretty much pure JS - i.e. the pinterest scroll listeners are doing a lot of work. If you want to treat it as a gecko-side issue then the component would be the JS engine.

That being said, the compositor thread is able to composite at 60fps per your profile so that basically means that because of APZ we should be able to scroll smoothly even though the content thread is bogged down. The problem as reported in comment 0 was that keyboard scrolling in particular was not smooth - and therefore that must be due to keyboard scrolling not going through APZ, because of non-passive keyboard listeners being registered (at least that's what the case was when I made comment 1, I haven't re-verified). I think the reason I moved this to outreach was to get pinterest to drop their key event listeners, or at least mark them as passive, so that keyboard scrolling goes through APZ.
Flags: needinfo?(kats)
Thanks kats for the additional explanation. 
This is useful to attempt an outreach. 

Let's move this to contactready.
Whiteboard: [gfx-noted][needsdiagnosis] → [gfx-noted][contactready]
Product: Tech Evangelism → Web Compatibility

See bug 1547409. Moving webcompat whiteboard tags to keywords.

This issue is reproducible on latest Nightly 70.0a1 (2019-08-27). Updating flags.

This issue is reproducible on latest Nightly 71.0a1 (2019-09-24) On Mac OS X. Updating flags.

You need to log in before you can comment on or make changes to this bug.