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

#css #google-chrome #scaling

#css #google-chrome #масштабирование

Вопрос:

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

редактировать: ну, похоже, это происходит только на дисплее retina

правка 2: я обновил chrome с 72 до 73, и теперь все в порядке

1. у меня в Chrome работает нормально.

2. хм… странно… возможно, проблема связана с дисплеем retina?

3. @MikelFerreiro о боже… Я обновил Chrome с 72 до 73, и теперь все в порядке…

4. Я не уверен, что это хорошая идея писать такие вещи, как html {font-size: 0.9rem;} . rem — это размер html-элемента (r означает root), поэтому вы в основном говорите, что rem равен 0,9 от rem.

5. @MrLister итак, вы бы использовали font-size: 90% вместо этого? Похоже, что это не ведет себя по-другому.

Ответ №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

1. Проблема с масштабированием… У меня были проблемы также с другими элементами, которые не соответствовали их размерам и которые не были идеальными для пикселей.

2. Похоже, обновление версии Chrome устраняет проблему — возможно, все же стоит применить это в качестве запасного варианта для пользователей, у которых нет последней версии браузера?

3. Ну, вы знаете, я упоминал, что это не единственная проблема в нашем приложении при масштабировании… и у нас нет ресурсов, чтобы сделать несколько резервных копий для каждого компонента пользовательского интерфейса.