Skip to content

BTabs only becomes visible on mounted, resulting in CLS #2652

@sebbayer

Description

@sebbayer

Describe the bug

This is maybe related to my other issue which was recently resolved #2601

The BTabs component has no visible content rendered during SSR in a Nuxt environment. The <ul> element with the tab headers is still empty and all of the tab content <div> elements are still set to display: none. On client side during mounted, the tab headers are then rendered and the active tab content is made visible via the active class. I believe this is different behaviour from bootstrap-vue 2.x

This behaviour creates a cumulative layout shift, among other issues for me related to the tab content not being visible yet.

I provided a Stackblitz demo but it is difficult to demonstrate because the Stackblitz preview does not work with JS disabled. It is just a very basic BTabs example taken from the documentation.

Reproduction

https://stackblitz.com/edit/nuxt-starter-mlet8bwm?file=app.vue

Used Package Manager

yarn

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions