Transform translate имеет странное поведение при фокусировке клавиатуры в Chrome

Question

Я разрабатываю боковую панель навигации, которая должна показывать некоторые данные, когда они закрыты, и отображать их все, когда вы наводите курсор или фокусируете их с помощью навигации по клавиатуре (в этом случае просто используйте кнопку вкладки). Это работает благодаря наличию внутреннего контейнера, который я перевожу напротив внешнего контейнера, что позволяет показывать некоторый контент, даже когда он закрыт. Он отлично работает при наведении курсора, но при переходе к событиям клавиатуры (кнопка вкладки) внутренний контейнер неожиданно превращается в неправильное место. Если я удаляю и применяю класс translate снова к внутреннему классу, он переводит обратно туда, где и должен.

Мне кажется странным, что внутренний контейнер просто переводит себя в фокус. И даже более странно, что это, кажется, не отражено в CSS элемента, что я могу просто удалить и повторно применить тот же класс, и тогда он будет работать.

Здесь найден минимальный воспроизводимый пример: https://codepen.io/kasperlauge/pen/dyoaxKJ

Код для этого:

HTML:

<h1>Hover this list to reveal more...</h1>
<div class="outer">
    <div class="inner">
    <button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
    <button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
    <button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
    <button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
    <button type="button">abcdefghijklmnopqrstuvxyz</button><br/>
    <button type="button">abcdefghijklmnopqrstuvxyz</button>
    </div>
</div>

CSS:

.inner, .outer {
    width:200px;
    overflow:hidden;
    transition:all 0.3s;
}
.inner {
    transform:translateX(150px)
}
.outer {
    transform:translateX(-150px);
    background-color: #BBB;
    padding: 10px;
}
.outer:hover, 
.outer:hover .inner {
    transform:translateX(0)
}

Когда не завис или не сфокусирован:

Когда завис (правильное поведение):

Когда вкладка (неправильное поведение):

Может кто-нибудь помочь?

Answer 1

Я действительно решил это для моего случая, но, к сожалению, он не обобщает код, указанный в вопросе, поэтому я все же хотел бы увидеть хорошее решение для этого в Chrome и Edge, как Firefox делает не генерировать ошибочную прокрутку.

В моем случае я решил эту проблему, уменьшив ширину кнопок, чтобы они вписались в нераскрытый материал. Это работает в нашем случае, потому что у нас есть три состояния раскрытия в нашем меню, и оно должно соответствовать только двум первым состояниям.