Клавиша Tab вызывает изменение положения и переполнение скрытых элементов.

Question

Вот пошаговая форма, работающая как слайдер.

У родительского элемента div есть стиль

#formContainer {
position: absolute;
top: calc((100% - 400px) / 2);
overflow: hidden;
}

, у детей

.step {
    position: absolute;
    top: 0;
    width: 100%;
}

, у активного ребенка

.step-1 .select {
    left: 0;
}

, у пассивных детей

.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
    left: 600px;
}

Когда активен первый шаг и нажата клавиша TAB, он выглядит следующим образом:

Каким-то образом, даже если скрытые шаги слева установлены на 600px, конфликты позиционирования и другие шаги, элементы появляются на экране.

Answer 1

Добавление visibility: hidden к скрытым элементам устраняет нежелательную прокрутку и сохраняет эффект скольжения.

.step-1 .mail, .step-1 .add-message, .step-1 .progress, .step-1 .complete {
    left: 600px;
    visibility: hidden;
}