bluesky-social / social-app

The Bluesky Social application for Web, iOS, and Android
https://bsky.app
MIT License
8.59k stars 1.13k forks source link

Unanchored UI elements #4725

Open ljstella opened 3 months ago

ljstella commented 3 months ago

Describe the bug Not really sure how to describe this other than "unanchored" or "untethered". It appears that under some conditions, a fresh load of the homepage renders the site slightly zoomed in. You can pinch-to-zoom out and things look normal again, until you navigate away to a new page. One of the side effects of this weird zoom state is that columns seem to move side to side way more than they should.

To Reproduce

Steps to reproduce the behavior:

  1. Load https://bsky.app in Safari on an iPad.
  2. Place your finger down on the right hand side of the screen, and drag it to the right.

Expected behavior

Pages should load at the expected zoom level, and UI elements shouldn't shift under each other

Screenshots

image

Details

Additional context

Accidentally discovered this when trying to zoom out because the UI all seemed to look just a bit off (the weird zoom mentioned earlier). The behavior appears to me to be isolated to the desktop site with a touch interface.

ljstella commented 3 months ago

Got a video that shows it better than I could describe I think. Browser refresh is the redraw in the center. Unfortunately, touch gestures aren't captured in the recording so to summarize for reproduction: First bit is expected behavior, I've already pinched to zoom out for that. A few seconds in, I refresh via the browser. If you pause there and compare it to the pre-refresh, you may be able to tell that while things are all where they're supposed to be, something doesn't look quite right. I then place my finger on the right hand side of the screen and slide left, and then on the left and slide it right.

Recording: https://github.com/bluesky-social/social-app/assets/1413514/b422cf15-f8c8-4b47-b4be-91441cf46d51

ljstella commented 3 months ago

Update: This does appear to be possible in a desktop browser, but more difficult to achieve, and not to the same degree as on the iPad.

Screenshot: Screenshot 2024-07-03 at 9 56 30 AM

System info: Build version: 1.87.0; Bundle info: fe01f32 (prod); Bundle date: 24062805; Platform: web Chrome Version 126.0.6478.127 OS: MacOS Sonoma 14.5

Repro steps: 1) Login to https://bsky.app in Chrome 2) Place the cursor anywhere on the screen 3) With the magic trackpad on your Mac, two fingers down, and swipe to the right