Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Follow-up from #1963886: Use HiDPI icons in the toolbar.
The Toolbar icons are stretched in FF 24 on Mac OS X
Comments
Comment #1
nod_Comment #2
mcjim CreditAttribution: mcjim commentedComment #3
mcjim CreditAttribution: mcjim commentedThe 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.
Comment #4
joelpittetThat did the trick and still works in Chrome thank you.
Comment #5
soulston CreditAttribution: soulston commentedLooks good checked in FF, Chrome and IE 9+
Comment #6
webchickCommitted and pushed to 8.x. Thanks!
Comment #7.0
(not verified) CreditAttribution: commentedchanged issue summary