1389325 - Twitter search page is janky

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[Asif Youssuff]

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20170810100255

Steps to reproduce:

1. Navigate to https://twitter.com/search?f=tweets&vertical=default&q=%22firefox%22&l=en&src=typd (I was logged in, but I don't think it matters)
2. Scroll down the page using spacebar scroll primarily
3. click on posts 
4. scroll up and down page using trackpad scroll
5. continue scrolling using spacebar


Actual results:

Janky scrolling, janky transition effects when clicking on posts and exiting from posts back to search results. 

This gets worse the longer I scroll down page. 


Expected results:

No jank, the page should have felt snappy throughout. 

Profile attached (was unable to upload using Gecko profiler).

Comment 1

[Asif Youssuff]

Looks like the file, even when 7zipped is too large for bugzilla.

Uploaded to my Dropbox: https://www.dropbox.com/s/ew08hnox8kkszko/Firefox%202017-08-10%2019.50%20profile.sps.7z?dl=0

Comment 2

[Asif Youssuff]

Noticed Mike Conley looking for feedback on Twitter UI, so needinfo-ing him. Sorry Mike!

https://twitter.com/mike_conley/status/731124612919070720

Comment 3

[Mike Conley (:mconley) (:⚙️)]

Thanks for the profile!

Looks like this is mostly reflow.

As you scroll down Twitter, more and more DOM nodes get added to the page, and the page becomes proportionally more expensive to reflow - which is what occurs when even more things get added to the DOM (which is what happens when you scroll to the bottom of the page). Those reflows block the main thread, and seem to take > 100ms when they occur towards the end of the profile.

These reflows might account for the janky-ness you're seeing. I'm not seeing much else in here, but I'm queuing for analysis anyways.