[tabs] Wrong position of indicator & width when using transform:scale. #35631

Activity

1. madmonliadd

   added

   status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.These issues haven't been looked at yet by a maintainer.

   on Dec 26, 2022
2. ZeeshanTamboli commented on Dec 27, 2022

   

   ZeeshanTamboli

   on Dec 27, 2022

   Member

   More actions

   You need to target the indicator class on Tabs to style the tabs indicator. See the updated CodeSandbox: https://codesandbox.io/s/usage-forked-l1m7fu?file=/index.js
3. ZeeshanTamboli

   added

   scope: tabsChanges related to the tabs.Changes related to the tabs.

   support: Stack OverflowPlease ask the community on Stack Overflow.Please ask the community on Stack Overflow.

   and removed

   status: waiting for maintainerThese issues haven't been looked at yet by a maintainer.These issues haven't been looked at yet by a maintainer.

   on Dec 27, 2022
4. github-actions commented on Dec 27, 2022

   

   github-actionsBot

   on Dec 27, 2022

   Contributor

   More actions

   👋 Thanks for using MUI Core!

   We use GitHub issues exclusively as a bug and feature requests tracker, however,
   this issue appears to be a support request.

   For support, please check out https://mui.com/getting-started/support/. Thanks!

   If you have a question on Stack Overflow, you are welcome to link to it here, it might help others.
   If your issue is subsequently confirmed as a bug, and the report follows the issue template, it can be reopened.
5. github-actions

   closed this as completedon Dec 27, 2022
6. madmonliadd commented on Dec 27, 2022

   

   madmonliadd

   on Dec 27, 2022

   Author

   More actions

   @ZeeshanTamboli You removed the scaled div, of course it'll work when you remove the parent scale.
7. ZeeshanTamboli commented on Dec 27, 2022

   

   ZeeshanTamboli

   on Dec 27, 2022

   Member

   More actions

   @ZeeshanTamboli You removed the scaled div, of course it'll work when you remove the parent scale.

   @madmonliadd Sorry for that, I didn't read carefully about you saying Wrap the tabs component with a transform:scaled wrapper.

   I don't know why you want to achieve scaling for your use case, but you can increase the scaling by directly applying the styles to the AppBar. Having a unnecessary div in between for scaling is causing the issue of moving the position of the tab indicator. As for the width, it is calculated dynamically under the hood according to the size of the tab and considers various other factors, but you can override it with the .MuiTabs-indicator class if you want to or instead calculate it as per the scaling and apply it.

   See the updated CodeSandbox: https://codesandbox.io/s/usage-forked-1y7g9f?file=/index.js

   I would suggest to use StackOverflow for these type of questions.

   I hope it helps.
8. madmonliadd commented on Dec 27, 2022

   

   madmonliadd

   on Dec 27, 2022

   Author

   More actions

   @ZeeshanTamboli Hey, thanks for your help, I tried stack overflow without success, it's a bug, not a help request.
   Your codesandbox didn't solve the issue, click other tabs and see how the position of the indicator is incorrect, it's not directly under the selected tab.
9. ZeeshanTamboli commented on Dec 27, 2022

   

   ZeeshanTamboli

   on Dec 27, 2022

   Member

   More actions

   it's a bug, not a help request.

   It's not a bug. It's just about overriding with the correct styles.

   You have to simply find a way to style the tab indicator properly. Maybe you want to check if you are correctly using transform: scale property. You may not want to scale the indicator or maybe you shouldn't use the scale on tabs in the first place and use sizing. Take a look at the customization of Tabs docs: https://mui.com/material-ui/react-tabs/#customization
10. carmenchapa commented on Feb 7, 2025

    

    carmenchapa

    on Feb 7, 2025

    More actions

    In case someone else lands here.
    I faced this problem in an app where scaling a parent container was not up to me.
    I could fix it by overriding left style of indicator like below. In my case the fixed values worked.

    const indicatorLefts = {
      first: '0px',
      second: '50px',
      third: '100px',
    }
    ....
    
    <Tabs
      ...
        sx={{
          '& .MuiTabs-indicator': {
           left: `${indicatorLefts[activeTab]} !important`,
         }
       }}
    >
    ...
    </Tabs>
    

    👍React with 👍1Reacted by gtasi-mirango
11. AndreFavotto commented on Sep 3, 2026

    

    AndreFavotto

    on Sep 3, 2026

    Last edited by AndreFavotto

    More actions

    @ZeeshanTamboli
    I see the exact same issue, and it seems like a bug, as opposed to what was said.

    The indicator does not follow the button size if scaling is applied to a parent div.
    In the video below no special handling is applied to the buttons, and they keep their size just fine with parent scaling. The selector should just do the same.

    In my case, the parent container is scaled due to the canvas zoom. I would expect the indicators to follow the size of the button without me needing to "override with the correct styles."

    Screencast.From.2026-09-03.20-38-46.webm

    PS: I am able to reproduce this even on MUI docs by setting transform: "scale(1.2)", transformOrigin: "top left" in any of the parent Boxes of the tab examples in here.
12. AndreFavotto

    added a commit that references this issue on Sep 3, 2026

    Workaround MUI Tabs indicator transform

    ...

    4f6acb7
13. ZeeshanTamboli commented on Sep 30, 2026

    

    ZeeshanTamboli

    on Sep 30, 2026

    Member

    More actions

    I will re-open this and mark it as a bug. The Tabs indicator should follow the Button size as mentioned above.
14. ZeeshanTamboli

    reopened this on Sep 30, 2026
15. github-actions

    removed

    support: Stack OverflowPlease ask the community on Stack Overflow.Please ask the community on Stack Overflow.

    on Sep 30, 2026
16. ZeeshanTamboli

    changed the title [-]Tabs indicator wrong position & width when using transform:scale.[/-] [+][tabs] Wrong position of indicator & width when using transform:scale.[/+] on Sep 30, 2026
17. ZeeshanTamboli

    added

    type: bugIt doesn't behave as expected.It doesn't behave as expected.

    on Sep 30, 2026
18. maricastroc commented on Sep 30, 2026

    

    maricastroc

    on Sep 30, 2026

    Contributor

    More actions

    I investigated this on the current master and was able to reproduce it.

    The indicator calculation currently mixes transformed viewport measurements from getBoundingClientRect() with local scroller coordinates. With a scaled ancestor, the resulting left/width values already include the scale and are then scaled again when the indicator is rendered.

    I have a small fix that normalizes those measurements back to the scroller's local coordinate space before calculating the indicator position/size, while preserving the existing sub-pixel behavior when no transform is present.

    I'd be happy to open a PR with regression coverage for this.

    ❤️React with ❤️1Reacted by André Favoto
19. ZeeshanTamboli

    closed this as completedin #49269on Oct 14, 2026
20. github-actions commented on Oct 14, 2026

    

    github-actionsBot

    on Oct 14, 2026 – with GitHub Actions

    Contributor

    More actions

    This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
    Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

    ---

    @madmonliadd Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.