Hovering mouse over a theme shakes the screen

[wparslan]

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

[sabernhardt]

@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.

[sabernhardt]

#53570 was marked as a duplicate.

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

[audrasjb]

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.

[ryelle]

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.

Committed via https://core.trac.wordpress.org/changeset/52185.

[SergeyBiryukov]

#43615 was marked as a duplicate.