Icons in WP 3.5+ are distorted on retina screens #2469

Closed
scottsweb opened this Issue Feb 18, 2013 · 0 comments

2 participants

@scottsweb

Since the introduction of HiDPI/Retina icons in the wp-admin the WooCommerce icons are scaled incorrectly on retina screens.

Screen Shot 2013-02-18 at 21 56 48

The offending CSS in colors-fresh.min.css is:

.icon16.icon-dashboard, .menu-icon-dashboard div.wp-menu-image, .icon16.icon-post, .menu-icon-post div.wp-menu-image, .icon16.icon-media, .menu-icon-media div.wp-menu-image, .icon16.icon-links, .menu-icon-links div.wp-menu-image, .icon16.icon-page, .menu-icon-page div.wp-menu-image, .icon16.icon-comments, .menu-icon-comments div.wp-menu-image, .icon16.icon-appearance, .menu-icon-appearance div.wp-menu-image, .icon16.icon-plugins, .menu-icon-plugins div.wp-menu-image, .icon16.icon-users, .menu-icon-users div.wp-menu-image, .icon16.icon-tools, .menu-icon-tools div.wp-menu-image, .icon16.icon-settings, .menu-icon-settings div.wp-menu-image, .icon16.icon-site, .menu-icon-site div.wp-menu-image, .icon16.icon-generic, .menu-icon-generic div.wp-menu-image {
    background-image: url("../images/menu-2x.png?ver=20121105");
    background-size: 390px 64px;
}

It looks like you need to overwrite the background-size property for retina displays with your own CSS. My test browser is Firefox 18.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment