Почему не правильно считаются rem?

Question

[pontiac358]

Почему то на некоторых компьютерах не правильно считаются rem единицы, а именно умножается все отступы и размеры на 10. Проверял на последнем хроме.
Получается вот так, joxi.ru/EA4zExlIweeaXm
и странно то что шрифт нормально считается, а сами размеры нет.

Answer 1

[SagePtr]

Видимо, из-за настройки "минимальный размер шрифта" в браузере. Вы задали базовый размер шрифта на странице равный 1px, и браузер этот размер может увеличить, если он ниже минимального и ненулевой, а в итоге все элементы, заданные в rem, изменят свой размер пропорционально этому увеличению.

Comments

[pontiac358]

Но в данном случае не правильно считается все кроме шрифта, посмотрите на скриншоте, шрифт у тега P равен 16rem, высота 20rem. Шрифт не становится огромным, а высота становится

[SagePtr]

pontiac358, видимо, в данном браузере сначала высчитывается высота шрифта, потом она исправляется если меньше минимального размера, а потом высчитывается остальное, но высота шрифта не пересчитывается. Больше похоже на баг.

[pontiac358]

в общем у меня такая ситуация, есть сайт сверстан на ремах https://fondinsan.ru/
jsом высчитывается font-size в зависимости от ширины экрана и устанавливается тегу html, на некоторых компьютерах (по крайней мере на двух) сайт полностью сломан, один логотип становится на пол экрана. Даже не знаю куда копать

[Сергей Герасимов]

pontiac358, а если попробовать всё же не задавать настолько маленький базовый шрифт? В rem можно же и не целыми значениями задавать

[SagePtr]

pontiac358, на тех компьютерах, на которых сайт отображается неправильно, он отображается неправильно на различных браузерах или на одном конкретном? Если на одном, а на других всё норм - то есть ли какая-нибудь зависимость к примеру от версии браузера?

[pontiac358]

SagePtr, проверял на хроме последней версии, могу только одно сказать этот компьютер находится в Саудовской Аравии, язык стоит арабский. Может он как то влияет

[SagePtr]

pontiac358, вполне может влиять (если баг проявляется только в локалях, использующих письменность справа налево)

Answer 2

[Сергей delphinpro]

Вот так это делается https://codepen.io/anon/pen/Zjjerr