Comments (5)
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:
docsify-tabs/src/scss/style.scss
Lines 35 to 39 in 1c60842
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
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.
Related Issues (20)
- Tab titles aren't processed by the markdown compiler HOT 2
- Tab not working in my case HOT 2
- I need your help,using this plug-in, refresh, can not locate the exact location of the page HOT 1
- Can tabs add support for the chinese title? HOT 2
- File include support HOT 1
- Vue.css theme is not supported HOT 1
- Can tabs add support for Mustache template? HOT 3
- Wrong parse with escape chars HOT 1
- Tabs not rendering as tabs HOT 4
- access document link ‘?Id=xxx’ positioning problem HOT 1
- Tabs unselected when changing pages HOT 7
- Multiple tabs with same name changed together when one tab is clicked, how to change only one? HOT 1
- After [filename](README.md ':include'), the docsify-tabs plugin in README.md fails HOT 1
- Search Functionality in Tabs Tables HOT 1
- Redirection to a header makes the tab active HOT 3
- Error when in quote HOT 4
- Can we independently control the label synchronization switching function? HOT 2
- Is the docs site broken?
- Additional space at the end of tab title prevents correct rendering
- Combining docsify-tabs with docsify-edit-on-github plugin HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from docsify-tabs.