Vertical toolbar down icons are stretched. [#2094817]

Follow-up from #1963886: Use HiDPI icons in the toolbar.

The Toolbar icons are stretched in FF 24 on Mac OS X

Welcome_to_Site-Install___Site-Install_and__joelpittet___drupal-twig__31__sn__Weekly_meetings_Thur_11_3…-2.png

Comment	File	Size	Author
#3	2094817-vertical-toolbar-icons-stretched.patch	943 bytes	mcjim
#3
#3	2094817-vertical-toolbar-icons-stretched-IE10.png	13.44 KB	mcjim
	Welcome_to_Site-Install___Site-Install_and__joelpittet___drupal-twig__31__sn__Weekly_meetings_Thur_11_3…-2.png	107.69 KB	joelpittet

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

nod_

French

Lille

CreditAttribution: nod_ commented 21 September 2013 at 16:27

Category:

task

» bug

Comment #2

mcjim CreditAttribution: mcjim commented 22 September 2013 at 15:07

Assigned:

Unassigned

» mcjim

Comment #3

mcjim CreditAttribution: mcjim commented 23 September 2013 at 10:12

Status:

Active

» Needs review

File	Size
2094817-vertical-toolbar-icons-stretched-IE10.png	13.44 KB
2094817-vertical-toolbar-icons-stretched.patch	943 bytes

The icons are added as background images. They are SVGs.
It turns out that it was Chrome that was rendering them incorrectly, not Firefox. Firefox was rendering the background-size so that the height of the icon was 75% of the background area, which was quite a lot larger than the width.

The fix is to change the background-size property to 75%, rather than 75% 75%, so that the height is proportional to the icon's width.

Screenshot is from IE10, which was showing the same behaviour as Firefox.

IE10 screenshot