[Bug] Headers inside of tab contents flickering

Hello,

We've experienced a bug with tab switching - when there's an opening heading inside of a tab and you switch tabs, the heading is going to flicker.

Video showing the issue: https://streamable.com/zbilpc
Browsers used: Firefox 70.0, Chromium 76.0.3809.100
How to reproduce: Put a heading inside of a tab (as its first content), switch tabs and notice the heading flickering

We also prepared a repo allowing you reproduce it easily - you can just clone it and run: https://github.com/brcdev/docsify-tabs-bug-demo

Thank you,
Emil

I have encountered the same issue.

Hi @brcdev --

Apologies for the very slow response on this.

I'm not seeing this behavior on docsify-tabs website which has headings in under "Tab B" and "Tab C" of the "Demo" section. I'm also not seeing it on a local site using the markdown in the repo linked above. Both were tested in Chrome 86, Firefox 82, and Safari 14 on macOS 10.15.7.

Perhaps the issue has been resolved in later versions of Chrome? If you're still seeing the issue, let me know and we'll investigate further.

Closing for now since I was unable to reproduce the issue, but I'm happy to reopen if needed.

Thanks!

I am also able to reproduce this locally using the above test repo, on Firefox 84, Chrome 87, Edge 87 and Safari 14, on both Windows 10 and macOS 11.

Some further information, since the streamable link is down now:

When switching tabs, the first heading of the previously active tab briefly appears just above the tab contents:

If I add some text before the first heading in each tab, the flickering heading issue goes away, but the entire contents of the tab still flicker, instead of instantly changing to the new tab contents.

I agree this bug seems not to be present on the docsify-tabs site, but I have no idea why.

It seems the bug is present when the theme is set to any of the default docsify themes, and disappears when set to any of the docsify-themeable ones.

EDIT: I have tracked it down to this CSS rule after noticing it still occurred even when I set Firefox to break on DOM mutation of the tabs.

This issue has been fixed. I will push an update with the change later today. If you are loading docsify-tabs via CDN, it typically takes a day or so for jsdelivr to update their redirects to the latest version.

For those who may be curious what caused the bug, consider how inactive content is hidden:

docsify-tabs/src/scss/style.scss

Lines 35 to 39 in 1c60842

    
           .docsify-tabs__content { 
        
               visibility: hidden; 
        
               position: absolute; 
        
               overflow: hidden; 
        
               height: 0;

As others have pointed out, hiding/showing this content using display: [block|none] is easier and it does solve the problem for basic markdown content. The reason the method of shown above is used is so that hidden tab content has dimensions which is often necessary for content that is initialized via JavaScript such as embeds from places like CodePen, CodeSandbox, etc.

Here is the cause of the inactive content flicker:

docsify-tabs/src/scss/style.scss

Lines 76 to 77 in 1c60842

    
           .docsify-tabs__content { 
        
               padding: var(--docsifytabs-content-padding);

The bug was caused by the fact that padding is visible even when the height of a container is set to 0. The fix was to apply padding only to the active tab content:

.docsify-tabs__tab--active + .docsify-tabs__content {
    padding: var(--docsifytabs-content-padding);
}

Apologies for the slow turnaround on this. I somehow missed @fauxpark's comment where he mentioned the issue only being present when using doscify's default themes (like vue.css). Knowing this is what allowed me to reproduce and fix the bug, so thank you @fauxpark.

	.docsify-tabs__content {
	visibility: hidden;
	position: absolute;
	overflow: hidden;
	height: 0;

	.docsify-tabs__content {
	padding: var(--docsifytabs-content-padding);