Foundation-sites: Foundation 6.4.3 Drilldown Bug

[nikkijd]

Basically the goal is to produce a drilldown that has no transition duration in .submenu.is-active which has transform: translateX(value). When trying to do the approach i encounter the following bug. Also i think it would be great if we can have this as an option attribute too.

How to reproduce this bug:

1. Create a basic drilldown structure

2. Use this CSS
.drilldown .is-drilldown-submenu { transition: none; }

3. Toggle the link with the submenu items. As you continue toggling it's .submenu element will be stuck with the following classes is-active is-closing.

Browser(s) and Device(s) tested on:

Android 8, IOS10, Safari 11 and chrome 61

Foundation Version(s) you are using:

v6.4.3

Codepen:
https://codepen.io/nikkijd/pen/NaowGB

[SassNinja]

@nikkijd the problem is there are event listeners on the transitionend that don't work anymore if you completely disable the transition.

I'm not sure if adding an option to disable the transition is good idea because this will result in several further conditions and probably some code duplication.

As a workaround you can set the delay to e.g. 1ms so transitioned still works but it feels like having no transition

$drilldown-transition: transform 1ms linear;

@kball @IamManchanda what do you think about adding an option to disable the transition?

[colin-marshall]

@ncoden what do you think about this one? A new option for no transition would technically be a new feature, but it would resolve a bug. Think it's worth trying to get in 6.5?

[ncoden]

@colin-marshall I think a better fix would be to detect wheter a transition is defined, non-null and correct, instead of simply "not undefined". If no valid transition is set, we manually trigger the transitionend event by ourselves.

Side note: transitions (and transitionend) are not supported by IE9.

[DanielRuf]

In general transition-duration: 0 should be also a solution.

No, there is no fix or change for this.

[ncoden]

No, there is no fix or change for this.

I don't understand. What do you mean ?

[ncoden]

In general transition-duration: 0 should be also a solution.

This is rather a hack. This is often difficult to know in CSS what we should support, to which point should we tolerate the component properties to be modified before saying that "the user simply broke it", and a easy solution is often to say that the user "extending a class" should, like other languages, know its internal process and take to not break anything.

However, I think that it is not obvious that the component is waiting for a transition end. IMHO correct implementation would be the safe one to wait for a transition end only if there is a transition to wait for, while taking care of all valid cases like none or and inital.

[DanielRuf]

I just wanted to show possible workarounds / solutions which might work.