Drilldown opens child menu without transition at mobile when flexbox on, sometime freeze.

[hongc-cc]

How to reproduce this bug:

The transition i referred is the animation of menu sliding in/out when clicked.

ver 6.3.1

1. flexbox ON
2. put a simple drilldown menu
3. click to open -> child menu opens with no transition
4. click back -> parent menu opens with transition occasionally it will freeze as well.

What should happen:

both should have transition

What happened instead:

opening does not have transtion.

Test case:

Test this on mobile. http://codepen.io/idolab/pen/KWGGry?editors=1111

[IamManchanda]

@idolab sorry but i am unable to reproduce!

Any specific browser where its happening ??

[hongc-cc]

Maybe ignore the freeing part first. But did you notice there is no tranistion in animation when opening child menu?

I have tested on mobile safari amd chrome browser

[kball]

I can reproduce the issue in the codepen on mobile safari. Lets see if we can take a look for 6.4/6.3.2

[proov]

Yeah i can confirm this bug on Safari (latest version, both iOS & Desktop Safari). There is something with transforms. I didn't know it had someting to do with flexbox. I will investigate this way :D Otherwise, it works with left transition.

Temporary Workaround :

.drilldown .is-drilldown-submenu {
    transition: left 0.5s ease-out;
    background-color: #fff;
    transform: none !important; // Reset transforms

    &.is-active {
      left: 0%;
    }

    &.is-active.is-closing {
      left: 100%;
    }
  }