Why does the formatting of content in tabs differ?

Problem

When using the Tab Groups or the Tab Wizard (without its beta layout) on a page, the page can lose some functionality and formatting from the referenced pages. This happens with both the new and the legacy editor.

Some potential problems:

• Images on the page cannot be enlarged by clicking

• Text size is slightly smaller (see Atlassian ticket 🎫)

• Charts don't span the entire page as they should

• Embedded images render at different sizes (see Atlassian ticket)

• Code Block macro is not rendering correctly (see Atlassian ticket)

• Smart Links are displayed as regular links

• Panels and lozenges are styled differently (size, background color)

• Emojis may be styled differently

• The emoji in the page title is not displayed (see our workaround)

• The header image of the page is not displayed

Cause

For performance reasons, we decided to use iFrames to render content, which do not allow us to display it with its original fidelity.

Note

• This technology is also used in Jira Service Management for Knowledge Base articles.

• We have listed some differences here: Limitations when nesting macros

Example

Potential Solution

As a workaround, our team implemented a new way to render content, the Content Beta Layout, which uses embeds instead of iframes and which allows the possibility for content to render in a more “natural“ way.

You can read more about it here: Tab Content Layout (Beta)

Note: This technology is only available when content is rendered from a different page; therefore, it is not possible with Tab Groups.

Additional information

Issues that were resolved in November 2022 by Atlassian (see ticket):

• The text font changes

• Emoticons are displayed as text/blue star

• Table width is irregular