How to get around Twitter blocking text search within page ("find in page")

Question

(for the Twitter website on a computer - not app or mobile)

If you use your browser's search function ("find in page") to search for a word on a page on Twitter that you are looking at, it will only find words that are visible right there on your screen at the moment you are searching and finds zero results for any word that you would have to scroll up or down to see (actually, it finds results within about two or three screen-fulls above and below, but not farther). Twitter is the only site I have ever seen out of thousands that does this.

What this means is, if you are viewing the site and want to go back to a tweet that was dozens of tweets farther up (or down), you can not search for it - you have start at the top of the page and scan through all the dozens of tweets to find it! How do you get around this?

Try it:

1. Go to any feed on Twitter and notice some word that is uncommon (any word, just not a common word such as "the").

2. Page-up or page-down so the word you noticed is no longer shown on your screen. Don't just do one page-up or -down; you need to do about two or three (or more).

3. Now do Ctrl-F like you are trying to find where on the page your word is found

4. You will get zero results

5. Now page-up or -down back to where you were, and of course your target word is right there in the tweet where you saw it.

So why is Twitter the only site that breaks Ctrl-F and how do you get around it?

Answer 1

Twitter isn't blocking the search. It's not showing up because the tweets you are searching for aren't actually on the page.

I opened the Dev Tools to check. Twitter only renders a handful of tweets on the page based on your screen size and current position on the page. They maintain the height of the page to make it seem like all the tweets are present on the current page. But, the number of tweets currently rendered on the DOM keeps changing as you scroll or resize the window. Every time you reach the bottom of the page, the new page data gets added to the local state and the height is updated.

They probably do this to avoid making the page bulky after a couple of pages since a lot of the tweets have media (videos, gifs etc). I can't think of any hack to fix this.

Here, several pages of tweets were loaded. The height is 48k+ px. But only 10 tweets are actually rendered on the DOM.

Decreased the window size and the tweets rendered became 4.