WordPress.org

Make WordPress Core

Opened 3 months ago

Last modified 6 weeks ago

#53478 new defect (bug)

Hovering mouse over a theme shakes the screen

Reported by: wparslan Owned by:
Milestone: 5.9 Priority: normal
Severity: major Version: 5.7.2
Component: Themes Keywords: has-screenshots has-patch
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 (4)

#1 @sabernhardt
3 months 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 months ago by sabernhardt (next)

#2 @sabernhardt
2 months ago

#53570 was marked as a duplicate.

#3 @sabernhardt
2 months 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.


6 weeks ago

  • 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

Note: See TracTickets for help on using tickets.