web.dev
web.dev copied to clipboard
Content flickering in landscape mode of mobile device.
Description
Web contents are flickering when user do scroll in Landscape mode of mobile device.
Tested device : Samsung Galaxy M30s
To Reproduce
- Go to web.dev/learn/design/intro/.
- Rotate your phone to get a Landscape mode.
- Slowly scroll down the content and you will see some contents are flickering at the top.
Expected behavior
No content should not flicker while scrolling through in Landscape mode.
Short video
https://user-images.githubusercontent.com/73552681/173512318-4b4adb49-24cc-4b28-a43a-b138dce94391.mp4
Note This behaviour is also applies to the path web.dev/learn/forms/form-element/.
As far as I can tell, this is:
- Only triggered when you start out in portrait and then switch to landscape while on that page. If you start off in landscape with a fresh navigation to that page, I can't reproduce it reliably.
- When this happens, there is a horizontal overscroll associated with the page. I'm having a hard time figuring out why that is. I think it might be due to the "breadcrumb" elements on the top of the page having their own scrollbars, which ends up forcing that element to overflow horizontally, but disabling overflow via CSS doesn't seem to help. In any case, that 1px worth of inadvertent horizontal scrolling that you get when you use touch navigation on the page might be related to the flickering of the
stickyheader element.
That's about all I can tell based on my knowledge of DevTools debugging. Assuming it does only happen when you start out on portrait and then switch to landscape while on that page, I don't think this is a particularly severe issue.
As you mentioned above, it only happening when starting out from portrait then switching to landscape while on that page.
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. To prevent this from happening, leave a comment.
Thanks for raising this. However, we are moving to a new platform and content on this site is now frozen. As this is about the site, then it shouldn’t be an issue after the move.