Свойство align-items: center в firefox и в chrome, как пофиксить?

Question

[Hlib]

На 1 пиксель ломается верстка в FireFox относительно Chrome, как выяснилось, все это скорее всего происходит из-за align-items: center.
Дело в том, что если не получается поставить элемент по центру, в связи нечетности пикселей или подобного, chrome поставить блок чуть ниже, а firefox чуть выше.
Например:
У нас есть блок в 2px и контейнер в 5px. Chrome поставит блок так, чтобы сверху было 2 пустых пикселя, а снизу 1 пустой пиксель. В этой же ситуации, firefox поступит так - он оставит 1 пустой пиксель сверху и 2 пустых пикселя снизу.
Как это пофиксить?
Есть ли какие-нибудь костыли? Популярные методы решения?

Comments

[Александр]

Страшно жить в мире, где в разных браузерах верстка отличается в 1 блоке на 1 пиксель, и то - по вертикали.

[Andrew]

jsом проверять движок браузера и сдвигать?)

[Hlib]

Andrew, Верно, но все еще надеюсь найти на чистом css ответ, через js уж через чур костыльно

[Andrew]

Hlib, 1 пиксель добавить/убрать к высоте блока очень проблематично?

[Aetae]

Тут только решать конкретную задачу, конкретным способом. Скорее всего можно сверстать так, чтобы не попадать на субпиксили, но надо смотреть.
В глобальных рамках естественно ничего сделать нельзя - это абсолютно разные движки, естественно они рисуют по разному. В обычных случаях такие мелочи не должны иметь значения, потому что вещи пиксельного размера не делают резиновыми.

Answer 1

[Flying]

Это следствие разных алгоритмов обработки суб-пиксельных вычислений т.к. браузерам всё равно в конечном итоге приходится рисовать страницу на экране, состоящем из пикселей. В случае hi dpi экранов, где за один логический пиксель отвечает несколько физических задача решается проще, но для экранов с dppx=1 приходится делать выбор и вот этот выбор делается по-разному.

На больших контейнерах это незаметно, а для маленьких - да, есть шанс того что элемент будет выглядеть "криво". Какого-то универсального решения здесь, судя по всему, нет, остаётся только подгонять, добавляя отступы в 1px туда или сюда для разных браузеров. Для того чтобы добавить CSS код только для какого-то конкретного браузера можно воспользоваться, к примеру, информацией с browserhacks, хотя, конечно, тут надо быть осмотрительным.