Skip to content

Cat-tabs are flickering when user switching tabs #738

Description

@glushkova91

Describe the bug
Cat-tabs width and position is changing when user switching tabs. That happens because active tab has font-weight: bold style. The bigger is the tab size and a difference in the project font between normal and bold fonts, stronger the flickering. As a quick solution we can remove bold style from active tab, but

  1. It should be agreed with UX team since it doesn't correspond to our design system
  2. Even if the bold style will b removed from active tab in cat-tabs component, user still can assign any style (including font-weight bold) to active tab, and in this case the issue will be reproducible

To Reproduce
Steps to reproduce the behavior:

  1. Open cat-tabs, first tab should be selected by default
  2. Try to select a second tab
    The first tab size became smaller, the second tab shifted to the left.

Expected behavior
The size of the first tab isn't changed, the second tab doesn't move.

Screenrecording

Screen.Recording.2025-04-28.at.2.14.40.PM.mov

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions