web.dev icon indicating copy to clipboard operation
web.dev copied to clipboard

Content flickering in landscape mode of mobile device.

Open sivaprasadev opened this issue 3 years ago • 3 comments
trafficstars

Description

Web contents are flickering when user do scroll in Landscape mode of mobile device.

Tested device : Samsung Galaxy M30s

To Reproduce

  1. Go to web.dev/learn/design/intro/.
  2. Rotate your phone to get a Landscape mode.
  3. 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/.

sivaprasadev avatar Jun 14 '22 06:06 sivaprasadev

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 sticky header 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.

jeffposnick avatar Jun 14 '22 17:06 jeffposnick

As you mentioned above, it only happening when starting out from portrait then switching to landscape while on that page.

sivaprasadev avatar Jun 15 '22 05:06 sivaprasadev

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.

stale[bot] avatar Sep 21 '22 01:09 stale[bot]

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.

dstmarthe avatar Aug 31 '23 05:08 dstmarthe