Scrollable tabs auto scroll to selected tab when under transform: scale

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Steps:

1. Add Tabs component to the page with variant="scrollable" and enough tabs so that the scrollbar arrows appear.
2. Add transform: scale(0.8) to the parent element of the tabs component.
3. Click the arrow to scroll (or drag on mobile), it will auto scroll back to the currently selected tab.

Current behavior 😯

The tabs component is scrolling back to the selected tab instead of the intended scroll behavior.

This is reproducible on firefox and chrome on Windows 10, mac book pro, and iphone (safari and chrome)

Expected behavior 🤔

The tabs should not autoscroll back to the selected tab.

Context 🔦

This makes trying to select a tab that is far from the current selected tab very difficult

Your environment 🌎

System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.16.1 - C:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 6.14.12 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 106.0.5249.103
    Edge: Spartan (44.19041.1266.0), Chromium (106.0.1370.37)
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1
    @emotion/styled: ^11.3.0 => 11.3.0
    @mui/base:  5.0.0-alpha.100
    @mui/core-downloads-tracker:  5.10.8
    @mui/material: ^5.10.8 => 5.10.8
    @mui/private-theming:  5.10.6
    @mui/styled-engine:  5.10.8
    @mui/system:  5.10.8
    @mui/types:  7.2.0
    @mui/utils:  5.10.6
    @types/react:  17.0.9
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2