WordPress / wporg-theme-directory

16 stars 7 forks source link

Theme preview: Sidebar may still jump around when swapping styles variations or patterns #142

Open Clorith opened 3 months ago

Clorith commented 3 months ago

Describe the bug In #130, it was discussed how to potentially retain accessibility concerns, while also preventing the screen jumping when selecting patterns and style variations, and an expected fix was implemented in d97d68a26ed1db0c145694741d0c441163d6d4c1

The jumping may still occur, but is not consistently happening, or may not be obvious without mouse navigation, leading to additional confusion over the previous implementation where it would always take you to the top of the list element at the very least.

To Reproduce Steps to reproduce the behavior:

  1. Go to https://wordpress.org/themes/twentytwentyfour/preview/
  2. Click on a style variation
  3. Scroll down to a pattern a few lines down
  4. Click the pattern
  5. Observe that the view may scroll up multiple rows, or just align it self to some unseen grid, or in some cases place the selected element near the bottom.

Expected behavior The "jumps" should be consistent if they are not possible to prevent, although ideally we would of course want to not cause jumps at all.

Screenshots Example of jumping behavior in navigation

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

ryelle commented 3 months ago

I wonder if this is an issue specific to Windows? I can't replicate it clicking on assorted patters/styles on Chrome on my mac. The only "jump" is if you click a card that's partially off screen, it should shift the scroll so that the full card is on screen, but it's pretty subtle.

https://github.com/WordPress/wporg-theme-directory/assets/541093/4373acd6-00e8-4c00-b78f-c4940ee565c2

Clorith commented 3 months ago

I've semi-consistently been able to replicate the behavior by picking a variation first, then making a click to move the selector outside either ul element, before selecting a pattern, but only rarely does the jumping happen when a pattern is already selected, it's... odd...