Unnecessary delay before fading-in new tab pane - tab.js

[Djules]

Using version 4.1.0, I found out a delay before new tab pane is shown with JS behavior and fade effect.
This delay is the transition-duration value of the fade utility class.

Issue comes from the _activate method, line 144 in tab.js file.

There is a listener added to the previously activated tab pane for the transitionend event, but no classes are added to this element after that, so only the emulator can triggers the callback which activates the new one.

Have a look at the demo in the official doc.

[thinkstudeo]

This is a huge problem for ie11 and edge. The page containing say 4 tabs loads with the first one active and shown, but when we click on the second or third tab the inspector shows the active and fade classes applied properly but the tabpane is always blank. When I click on the tabpane in the inspector then the content becomes visible in the tab pane. I was not able to understand why it is happening but now it seems it may be related to this problem - outlined above by @Djules

[Djules]

@thinkstudeo Your mentioned issue is not strictly related to this one, but yours seems to be fixed in the latest stable 4.1.0, assuming you're still using 4.0.0 or older. Have a check! :)

[thinkstudeo]

@Djules Thanks for the tip. I was infact using 4.0.0 , I upgraded it to 4.1.0 , however the problem remains. I don't know why?

[Johann-S]

In 4.0.0 : https://codepen.io/Johann-S/pen/LmgVKL?editors=1010#0
In 4.1.1 : https://codepen.io/Johann-S/pen/Xqxbvd?editors=1010#0

I don't see a difference 😟

[Djules]

@Johann-S There is no difference indeed, still the issue is there, don't you see the 150ms delay when switching tab, before the new tab pane shows up?

If you increase the transition-duration value for the fade effect, the delay increases obviously (since 4.1.0).

Here is a fork of the 4.1.1 demo with a fix : https://codepen.io/Djules/pen/ELdPer

I'm going to give a PR about that.

[Johann-S]

yep but that's the behavior we had since the beginning 🤔 and that's why we added the ability to change that value with CSS or to simply remove fade class

[Djules]

I made a quick demo with Bootstrap 3.3.7 : https://codepen.io/Djules/pen/ELdKPq

As you can see, there were no delay when switching tabs; current one fade-out then new one fade-in.

[Johann-S]

That's strange 🤔 because that's the same in v3 (https://github.com/twbs/bootstrap/blob/v3.4.0-dev/js/tab.js#L108)

[Djules]

The next line is the one which actually fade-out the active tab: https://github.com/twbs/bootstrap/blob/v3.4.0-dev/js/tab.js#L111

There is no such line in v4, this is the fix I made in the 4.1.1 demo above.

[Johann-S]

I saw you removed .active before the transition-end event, but why ?
It'll be done by this line after the transition : https://github.com/twbs/bootstrap/blob/v4-dev/js/src/tab.js#L175 ?

[Djules]

It'll be done by this line after the transition

I agree, but what triggers this transition ? There is no class added or removed to the active tab before the callback, so there is no transitionend event triggered from CSS, only the emulator did.

It's pretty clear for me where the issue comes from but it doesn't seem for your…

By the way, thanks for your time involved.

[Johann-S]

Ok I understand, I made a CodePen which demonstrate what you explained see: https://codepen.io/Johann-S/pen/jxeRoa?editors=1010#0

Open the console and you'll see a warning which said: transition end not called, emulate

BTW it was better in Beta 2 than now see: https://codepen.io/Johann-S/pen/qYJGrE?editors=1010

[XhmikosR]

@Johann-S: is this still valid?

[Johann-S]

Yep still valid