Вопрос по использованию visibility: hidden?

Question

[r_g_b_a]

Хочу для подложки и ее последующей анимации использовать стили

.overlay {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
}

Есть какие-то подводные камни у данного кода? Учитывая, что он полностью перекрывает весь контент сайта, хочу быть уверенным, что пока элемент скрытый, он не будет кликабельным и не получит фокус.
Просмотрел много реализаций off-canvas меню, и почти везде по какой-то причине оверлей либо скрывают через display: none, либо убирают за пределы экрана.