SectionExpandable causes infinite "transitionend" events in IE11

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.

SectionExpandableBug.oml

mvp_badge
MVP

Hi Nelson,

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

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.