Closed Bug 1393460 Opened 7 years ago Closed 2 years ago

Keyboard scrolling is not smooth on Pinterest

Categories

(Web Compatibility :: Site Reports, defect, P3)

Product:
Web Compatibility
Component:
Site Reports
Type:
defect

Tracking

(firefox-esr78 affected, firefox55 affected, firefox56 affected, firefox57 affected, firefox66 affected, firefox67 affected, firefox68 affected, firefox69 affected, firefox70 affected, firefox71 affected, firefox72 affected, firefox73 affected, firefox74 affected, firefox75 affected, firefox76 affected, firefox77 affected, firefox78 affected, firefox79 affected, firefox80 affected, firefox81 affected, firefox82 affected, firefox83 affected, firefox84 affected, firefox89 affected)

Status:
RESOLVED WORKSFORME
Tracking Flags:
Tracking Status
firefox-esr78 --- affected
firefox55 --- affected
firefox56 --- affected
firefox57 --- affected
firefox66 --- affected
firefox67 --- affected
firefox68 --- affected
firefox69 --- affected
firefox70 --- affected
firefox71 --- affected
firefox72 --- affected
firefox73 --- affected
firefox74 --- affected
firefox75 --- affected
firefox76 --- affected
firefox77 --- affected
firefox78 --- affected
firefox79 --- affected
firefox80 --- affected
firefox81 --- affected
firefox82 --- affected
firefox83 --- affected
firefox84 --- affected
firefox89 --- affected

People

(Reporter: phorea, Unassigned)

References

(
URL
)

Details

(Keywords: webcompat:site-wait, 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.

Keywords: webcompat:contact-ready

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

status-firefox69: --- → affected
status-firefox70: --- → affected

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

Tested on Mac OS X 10.15 with FF Nightly 72.0a1(2019-10-22) and I can reproduce the issue.

status-firefox72: --- → affected

Reproduced on latest Nightly 73.0a1 (12.12.2019) on Windows 7.

status-firefox73: --- → affected

This issue was reproducible on Windows 10 with Firefox Nightly version 74.0a1 (2020-01-14) (64-bit). Marked as affected.

status-firefox74: --- → affected

This issue was reproducible on latest Nightly version 74.0a1 (2020-02-04) on Windows 10

I was able to reproduce this issue on latest Nightly version 75.0a1 (2020-02-17) on macOS 10.14.
Based on this I will mark firefox75 flag as affected.

status-firefox75: --- → affected

This issue was reproducible with latest Nightly version 77.0a1 (2020-04-13) on macOS 10.15. I will update the flag as affected for this version.

status-firefox77: --- → affected

Reproduced on latest Nightly 78.0a1 (2020-05-12) on macOS 10.14. Changed flags accordingly.

status-firefox78: --- → affected

Reproducible on latest Nightly version 79.0a1 (2020-06-24) on Ubuntu 20.04. Changed flags accordingly.

status-firefox79: --- → affected
URL: https://www.pinterest.com/
Severity: normal → S3

I've sent a message on our internal mailing list.

Keywords: webcompat:contact-ready → webcompat:site-wait

Reproducible on the latest Firefox 80 beta and Nightly 81.0a1 on Windows 7.

status-firefox80: --- → affected
status-firefox81: --- → affected

Reproduced on latest Nightly 82.0a1 (20200915092930) on Windows 10 x64bit.

status-firefox82: --- → affected

For me, both Chrome and Firefox exhibit a janky scroll using the keyboard arrows.

Reporter, could you please confirm this?

Tested with:

Browser / Version: Firefox Nightly 100.0a1 (2022-03-31) (64-bit)/ Chrome Version 100.0.4896.60 (Official Build) (64-bit)
Operating System: Windows 10 PRO x64
Operating System: Mac OSX 10.15.6

Flags: needinfo?(petruta.rasa)

Keyboard scrolling improved significantly in latest Firefox versions, so I assume it's safe at this point to close this issue as RWFM.

Status: NEW → RESOLVED
Closed: 2 years ago
Flags: needinfo?(petruta.rasa)
Resolution: --- → WORKSFORME
You need to log in before you can comment on or make changes to this bug.