WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 3 months ago

#43423 closed defect (bug) (fixed)

Adminbar Icons Resize Incorrectly

Reported by: johnjamesjacoby Owned by: sabernhardt
Milestone: 5.9 Priority: normal
Severity: normal Version:
Component: Toolbar Keywords: has-patch needs-testing
Focuses: ui, css Cc:

Description

Icons in the adminbar are not resizing according to the correct screen width. This results in a pretty broken looking interface at a very specific browser window width.

I'll attach a video to better illustrate the problem. It looks like the CSS for the icon size is a few pixels off.

Attachments (2)

adminbar.mov​ (592.5 KB) - added by johnjamesjacoby 4 years ago.
43423.diff​ (434 bytes) - added by sabernhardt 5 months ago.

Download all attachments as: .zip

Change History (11)

@johnjamesjacoby
4 years ago

#1 @johnjamesjacoby
4 years ago

Sorry if the .mov format isn't most accessible; it's Quicktime's default.

Interestingly, this bug only manifests itself when shrinking the browser width, not when enlarging it.

#2 @SergeyBiryukov
4 years ago

Which browser is that? Can't seem to reproduce in Opera 50 (Windows 10).

#3 @johnjamesjacoby
4 years ago

macOS - Safari 11.1 (13605.1.27.2.1)

#4 @audrasjb
4 years ago

Hello,

I tried to reproduce the problem on MacOS / Safari but everything is fine on my side too. My version of Safari is not stricly the same as you – 11.0.3 (12604.5.6.1.1) – but it still seems odd.
Is it a fresh installation? No special configuration?

#5 @SergeyBiryukov
20 months ago

  • Focuses css added
  • Keywords reporter-feedback added

Is this still an issue?

Don't have Safari at hand, could not reproduce in the latest Chrome.

Last edited 20 months ago by SergeyBiryukov (previous) (diff)

#6 @sabernhardt
8 months ago

@johnjamesjacoby I don't see the odd resizing in Windows browsers.

  1. Does this still occur in 5.7 (with MacOS)?
  2. If it does, could you try removing the transition to check if that makes a difference?
Last edited 8 months ago by sabernhardt (previous) (diff)

@sabernhardt
5 months ago

#7 @sabernhardt
5 months ago

  • Keywords has-patch needs-testing added; reporter-feedback removed
  • Milestone changed from Awaiting Review to 5.9
  • Owner set to sabernhardt
  • Status changed from new to accepted

It still happens in Mac/Safari 13, either resizing the window or zooming in/out. Sometimes the icons get stuck at the wrong size until I hover over each.

I changed the transition to affect only the color property, and that seems to prevent the scaling issue in Safari.

#8 @sabernhardt
5 months ago

The original specification for all transitions was part of r26072

#9 @ryelle
3 months ago

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

In 51644:

Toolbar: Limit the icon transition style to color only.

When transition is all, it also applies to the icon size, which can cause a bug in Safari where icons get stuck in the wrong size when resizing the browser window. The only expected animation is on the color property, so the transition can be limited to just color.

Props johnjamesjacoby, sabernhardt, SergeyBiryukov, audrasjb.
Fixes #43423.

Note: See TracTickets for help on using tickets.