Make WordPress Core

Opened 3 years ago

Closed 3 years ago

Last modified 3 years ago

#53478 closed defect (bug) (fixed)

Hovering mouse over a theme shakes the screen

Reported by: wparslan's profile wparslan Owned by: ryelle's profile ryelle
Milestone: 5.9 Priority: normal
Severity: major Version: 5.7.2
Component: Themes Keywords: has-screenshots has-patch commit
Focuses: ui, css, administration Cc:

Description

Kindly see the video.
As I navigate to the themes page of WordPress everything is working okay.
As soon as I activate a theme and hover on any theme strange thing happens it jitters the whole page.

I deactivated all the plugins
Downloaded the themes on a fresh install

Attached Video => https://d.pr/v/ABGlLg

Change History (10)

#1 @sabernhardt
3 years ago

  • Focuses accessibility removed
  • Keywords needs-patch added
  • Milestone changed from Awaiting Review to 5.9

@wparslan Thanks for the report!

When the width and height are near where the scrollbar begins to show, the browser window can try to re-calculate the dimensions when hovering over items. That shifts the layout to include the scrollbar. I think it's related to the percent margins on the "card" for each theme, too.

Your video shows the problem in Edge, and the same happens in Chrome. One of the random window sizes where I saw this was 1240x760, without the theme activation notice above the theme cards. (I haven't been able to reproduce it in Firefox, though.)

One possible solution is adding the scrollbar to that page for everyone:

.themes-php {
    overflow-y: scroll;
}

While the flashing is particularly bad for some people, I removed the accessibility keyword because it's a more general interface problem.

Version 0, edited 3 years ago by sabernhardt (next)

#2 @sabernhardt
3 years ago

#53570 was marked as a duplicate.

#3 @sabernhardt
3 years ago

  • Summary changed from WordPress Theme Section to Hovering mouse over a theme shakes the screen

This ticket was mentioned in PR #1579 on WordPress/wordpress-develop by costdev.


3 years ago
#4

  • Keywords has-patch added; needs-patch removed

On the Manage Themes screen, some device sizes will experience 'shaking' or 'jittering' due to the vertical scrollbar appearing when hovering over a theme. This occurs only when the New theme activated. Visit site notice is displayed after activating a different theme.

Changes: Add overflow-y: scroll; to .themes-php, forcing the vertical scrollbar to be visible on the Manage Themes screen by default.

While not an ideal solution, it is the most common one for this issue, due to the drawbacks of other solutions.

Trac ticket: https://core.trac.wordpress.org/ticket/53478

This ticket was mentioned in Slack in #core by audrasjb. View the logs.


3 years ago

#6 @audrasjb
3 years ago

  • Keywords commit added

as per today's bug scrub, it appears this ticket still apply cleanly against trunk and that it fixes a known bug. Moving for commit consideratrion.

#7 @ryelle
3 years ago

  • Owner set to ryelle
  • Status changed from new to reviewing

#8 @ryelle
3 years ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

In 52185:

Themes: Force a scrollbar on the Themes page to prevent visual shake on hover.

On some browser & window size combinations (near where a scrollbar would appear), hovering over the theme card causes a layout shift. This makes the screen visually "jump" as the scrollbar appears and disappears. By forcing the scrollbar to be visible on this page, hovering doesn't cause the layout shift anymore.

Props wparslan, sabernhardt, costdev, audrasjb.
Fixes #53478.

#10 @SergeyBiryukov
3 years ago

#43615 was marked as a duplicate.

Note: See TracTickets for help on using tickets.