[Bug] Headers inside of tab contents flickering about docsify-tabs HOT 5 CLOSED

I have encountered the same issue.

from docsify-tabs.

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!

from docsify-tabs.

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.

from docsify-tabs.

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.

from docsify-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:

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:

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.

from docsify-tabs.