Почему разная высота блока с текстом в chrome на mac и windows?

Question

[Vladimir Kalaganov]

Адаптирую верстку под pixel perfect и столкнулся с разной высотой блоков на Windows и Mac в браузере Google Chrome.

Высота блока создается разной и под конец страницы верстка уже не попадает в блоки,
Использован normalize.css
Заданы параметры для шрифта
Задан шрифт из google fonts
Тест проводиться в Google Chrome

.review__text {
  font-size: 14px;
  font-weight: 400;
  line-height: 30px;
  text-align: center;
}

Пример:
https://codepen.io/kalaganov5/pen/yLaQaVN

На этом примеры, различия в 1.2 px, на большом количестве текста это уже переваливает за 8px по вертикали, много

Открываем на Windows и видим


Открываем на Mac и видим

Answer 1

[WapSter]

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

Answer 2

[Виктор Полторацкий]

Пользуйся rem em, у px есть различия в браузерах

Comments

[dreadwood]

rem и em относительные единицы, вероятно они так же будут высчитываться на основе px корневого элемента или родительского, который задан в px