Transform translate has wierd behavior on keyboard focus in Chrome - html

Question

I am developing a navigation side bar which should show some data when closed, and the reveal it all when hovered or focused via keyboard navigation (just using the tab button in this case). It works by having an inner container which I translates opposite of the outer container thus being able to show some content even when it is closed. It works perfectly fine when hovering, but when navigated to with keyboard events (tab button), the inner container suddenly translates itself the wrong place. If I remove and apply the translate class again on the inner class it translates back to where it should.
I find it weird that the inner container just translates itself on focus. And even weirder that it does not seem to be reflected in the CSS of the element, that I can just remove and reapply the same class and then it works.
A minimum reproducible example is found here: https://codepen.io/kasperlauge/pen/dyoaxKJ
Code for this is:
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)
}
When not hovered/focused:
When hovered (right behaviour):
When tabbed to (wrong behaviour):
Can somebody help?

Answer 1

I actually did solve it for my case, but unfortunately it does not generalize to the codepen provided in the question, thus I still would like to see a good solution to that in Chrome and Edge, as Firefox do not generate the faulty scrolling.
The way I solved it in my case was by reducing the width of the buttons to make them fit within the non revealed stuff. It works in our case because we have three states of revealing in our menu and it only have to fit within the two first states.