when tabbing out of the first page of a cardlayout the browser will switch the focus to a textbox on the next or previous panel. This will affect the scroll position of the scrollable panel resulting in a broken layout showing a part of the first panel, and a part of the second panel.

The component does not seem to be aware of that adjustment by the browser and continues to scroll to the next panel continuing to show the broken layout.

1) A possible solution would be to make the next/previous panel invisible (display: none) so they can't receive any focus (that's how tabbox works). While scrolling/swiping those panels need to be made visible to show the content during the transition animation and hidden afterwards to prevent focussing out.

(less intuitive alternative)
2) The opposite approach would be to allow tabbing to the next/previous cardlayout panel, and correctly update the scrollposition and the selectedIndex of the cardlayout to show a complete cardlayout panel.

Since users might require one or the other approach a switch between the behaviors could be a "nice to have" feature.

Option 1) sounds like a reasonable default (even if 2) is not implemented)