I've found a bug in the SectionExpandable pattern in SilkUI.

When a collapsed SectionExpandable is expanded, it will cause infinite "transitionend" events in IE11. 

This can be confirmed by opening the Dev Tools and checking .SectionExpandable_content div. The class will be constantly highlighted and the Styles panel will flicker indefinitely.

The other way to confirm this is by setting a breakpoint in the "transitionend" callback.

The callback will also fire indefinitely. If we inspect the event arguments, we can see inside the originalEvent property, that is firing a transition event on the "border-top-width" attribute.

While I couldn't figure out why it was firing on this attribute specifically, I managed to create a fix by changing the transition from all properties to height and padding only.

Here's the changed code:

.SectionExpandable_content {
  transition: all 500ms cubic-bezier(0.42, 0, 0.58, 1);
}

to

.SectionExpandable_content {
  transition: height 500ms cubic-bezier(0.42, 0, 0.58, 1), padding 500ms cubic-bezier(0.42, 0, 0.58, 1);
}


I've attached an OML file with both the issue and the fix used.

Hi Nelson,

Thanks for the extensive report! I think the best thing you can do is to report it to OutSystems Support.