Проблема с масштабированием Chrome при использовании модулей rem

Question

мы хотим, чтобы все на нашем сайте соответствовало 90% фактических пропорций (к счастью, мы используем rem-единицы), поэтому самое простое решение для нас - написать правило html { font-size: 0.9rem; }.Тем не менее, мы сталкиваемся с некоторыми ошибками при масштабировании в chrome - некоторые элементы имеют больший запас по сравнению с другими, а не с точной шириной / высотой и т. Д. Это прекрасно работает в Safari и Firefox ... Вы можете увидеть пример здесь в fiddle , некоторые кнопки имеют нежелательную последнюю белую линию высотой 1px вместо фона.

edit : похоже, это происходит только на дисплее сетчатки

edit 2 : я обновил хром с 72 до 73 и теперь все нормально

Answer 1

Проблема связана с вашим фоном.Измените его на «# ff0000», и разрыв исчезнет.

Если вы измените свой градиент на «background-image», а затем добавите «background-color»;Ваша проблема, похоже, исправлена:

.button.primary {
    background-image: linear-gradient(to right, #fac364 0%, #fabe53 50%, #ffb433 100%);
    background-color: #fac364;
    border: 0;
}

Обновлена ​​ваша скрипка: https://jsfiddle.net/kcazfps8/