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

Comments

Category:task» bug

Assigned:Unassigned» mcjim

Status:Active» Needs review
StatusFileSize
new13.44 KB
new943 bytes
PASSED: [[SimpleTest]]: [MySQL] 58,853 pass(es).
[ View ]

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

Status:Needs review» Reviewed & tested by the community

That did the trick and still works in Chrome thank you.

Looks good checked in FF, Chrome and IE 9+

Status:Reviewed & tested by the community» Fixed

Committed and pushed to 8.x. Thanks!

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

Issue summary:View changes

changed issue summary