There is a sizing bug in Safari that causes the icons to jump briefly in size when hovered over. The font rendering also changes on hover, this is a bit harder to see in the gif. Other browsers don't seem to have these issues.

animated gif showing issue with icons

CommentFileSizeAuthor
#4 adminimal_admin_toolbar-safari-icon-2876701-4.diff406 bytesIreneV
adminimal_admin_toolbar-safari.gif880.13 KBtanc

Comments

tanc created an issue. See original summary.

tanc’s picture

tanc
he/him
Primary language English
Location Italy
commented

It appears to be the transition which causes the icon size jump and the text rendering issues:

.toolbar .toolbar-icon:before {
    transition: .25s;
}
energee’s picture

energee commented

Removing this transition degrades the transition experience on chrome.

I see other reports of this bug:
https://stackoverflow.com/questions/29644539/svg-background-image-strang...

Anyone have a good solution?

IreneV’s picture

IreneV commented
Status: Active » Needs review
StatusFileSize
new adminimal_admin_toolbar-safari-icon-2876701-4.diff406 bytes

The easiest way to fix this issue - just remove transition.
Checked in chrome - looks great.
Please check patch

  • energee committed d7e300f on 8.x-1.x authored by IreneV 
    Issue #2876701 by IreneV, tanc: Icon size in Safari
energee’s picture

energee commented
Status: Needs review » Fixed

Looks good!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.