title: Transform transitions not working when combined with width changes
body: <p>I'm working on this mobile menu where you can expand and collapse different categories. When doing so, a sliding animation should be performed on the expanded submenu (when expanding) or on the top-level menu (when collapsing). </p>
  
  <p>The structure of the HTML is the following:</p>
  
  <pre><code>&lt;div class="slideOpenMainMenu"&gt;
      &lt;div class="sideMenuGeneral"&gt;
          ...Top-level menu...
      &lt;/div&gt;
      &lt;div class="sideMenuPanelMainChildren"&gt;
         ...Expanded submenu...
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>By adding and removing classes, I show the appropriate div while hiding the other from view. As you'll notice, I go out of my way to not use anything like <code>display:none;</code> since then I won't be able to animate the containers. Instead I use a combination of width, height, visibility and flex properties to hide and show the containers.  </p>
  
  <pre><code>/* Menu parent container */
  .slideOpenMainMenu {
    position: fixed;
    width: 100%;
    box-sizing: border-box;
    background: linear-gradient(90deg, #12416e 0%, #0d3050 100%);
    display: flex;
    justify-content: center;
  }
  
  /* Top-level menu - Initial state */
  
  .sideMenuGeneral {
    width: 100%;
    max-width: 620px;
    display: flex;
    flex-flow: column;
    padding: 20px 16px 0 16px;
    box-sizing: border-box;
    overflow: hidden;
  }
  
  /* item submenu - Initial state */
  
  .sideMenuPanelMainChildren {
    width: 0;
    height: 0;
    flex: 0 1 0;
    max-height: 100vh;
    overflow: hidden;
    visibility: hidden;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Top-level menu - Expanded state */
  
  .slideOpenMainMenu.item-expanded .sideMenuGeneral {
    width: 0%;
    padding: 0 !important;
    visibility: hidden;
  }
  
  .slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
    flex: 1 1 auto;
    flex-flow: column;
    width: 100%;
    height: auto;
    overflow: scroll;
    visibility: visible;
  }
  </code></pre>
  
  <p>For the animation, I use <code>transform:translateY</code> and <code>opacity</code> properties to create the sliding effect I want.</p>
  
  <pre><code>/* Initial state */
  .slideOpenMainMenu .sideMenuPanelMainChildren {
      opacity: 0;
      transform: translateX(30%);
      transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
  }
  
  .slideOpenMainMenu .sideMenuGeneral {
      opacity: 1;
      transform: translateX(0%);
      transition: opacity 0.5s ease, transform 0.5s ease, visibility 0s ease;
  }
  
  /* Expanded state */
  
  .slideOpenMainMenu.item-expanded .sideMenuPanelMainChildren {
      opacity: 1;
      transform: translateX(0%);
  }
  
  .slideOpenMainMenu.item-expanded .sideMenuGeneral {
      opacity: 0;
      height: 0px;
      transform: translateX(-50%);
  }
  </code></pre>
  
  <p>As you can see on <a href="https://jsfiddle.net/handfulofcats/uLvocryb" rel="nofollow noreferrer">this fiddle</a>, the animation works well in Chrome and Firefox. Not so well on Webkit and Edge. From what I can tell, there seems to be some kind of conflict between the change in width and the transitions, because when I disable changes in width, you can see the animation play out. What could cause the change in behavior between platforms? Is there a way to correctly sequence the changes?</p>