Ошибка Firefox или плохой гибкий дизайн?

Question

Я действительно понятия не имею, с чего начать.

У меня есть приложение с вложенными флексбоксами, каждое из которых содержит диапазон, который был повернут на 270 градусов.

Работает на Chrome, нов Firefox он изначально загружается так:

Как видите, отключенный тип ввода = числа, помеченные как PPV (+) и NPV (-), как-то странно сдвинуты вниз.Но если я осматриваю элемент или изменяю размер окна или других, казалось бы, случайных триггеров, он возвращается в правильное положение, выглядя так же, как хром:

Перо, демонстрирующееРазличие в Chrome и Firefox можно увидеть по адресу: CodePen Интересно, что удаление любого из этих двух стилей сводит на нет различный рендеринг между браузерами (оба браузера отображаются правильно).

.inputDiv input[type=number] {font-size 1.3rem}

И

.inputDiv > .fuzzyDiv {margin-top: 15px}

Кто-нибудь знает, что здесь происходит?

Answer 1

Много всего происходит в вашем коде.Не могу разобрать все это прямо сейчас.

Но сфокусируйтесь на этом правиле:

Когда вы выключаете left: -126px, элементы защелкиваются на месте.