В настоящее время я работаю над веб-приложением, и одним из наиболее важных фактов для нашего клиента является то, что оно удобно для пользователя, поэтому оно включает в себя множество значков.
Мы работаем со спрайтами, которые мы сделали сами, так как приложение будет включать в себя в основном пользовательские значки, которые вы больше нигде не найдете. Все работает нормально, за исключением случаев, когда вы смотрите на Edge или IE, значки ужасно пикселированы и сглажены.
Одна из вещей, которые мы заметили, заключается в том, что это, похоже, имеет место только для округлых значков, поэтому в целом все, что не является прямой линией, выглядит плохо. Я опубликую несколько сравнений ниже.
Как видите, для значка редактирования он выглядит примерно так же, но для двух других он явно сильно отличается.
Код, который генерирует эти значки, выглядит следующим образом:
.sprite { //sets the sprite that is going to be used
background: url('/img/default-icons.png');
background-repeat: no-repeat;
}
.header-edit { //specific icon, this is for the edit button
.sprite;
background-position: -91px -90px;
background-size: 242px 370px;
}
<button //button for which it is called
className="header-item header-edit editWizard"
onClick={e => this.clickSettings()}
>
У кого-нибудь есть какие-либо предположения относительно того, почему это происходит, и возможное исправление?
Заранее спасибо!