Jitteriness of Trailer text on mobile iPhone 7

[rhandleymcc]

Jitteriness of Trailer text on mobile iPhone 7

[rhandleymcc]

Initial load has the text jittering as you scroll, the problem goes away as more time is spent on page and had more time to load

Image.from.iOS.MP4

.

[dmnewcomb]

The underlying video doesn’t move at the same rate as the user scrolls. The video is also built in a way that the text is expected to fit into very specific portions of the screen. The current attempt at solving this is to apply a transform: translate(0, <negative variable>) to throttle the text as it scrolls up the screen to match the rate at which the video is moving.

The problem with this is that there are a lot of JavaScript demands listening to the scroll position with the combined need to update the video responsively and the text box position responsively. On a laptop's Chrome/Safari/FireFox, the page appears to handle this alright (MacBook Pro 2019 - macOS Monterey 12.3.1).

At the end of the day, it may (?) be up to the hardware that is running the article. Maybe a desktop or laptop can handle more updates to the screen more quickly than a phone can?

[dmnewcomb]

TODO: Need to see if more modern iPhones have the same struggle.