CSS - 'Shadow' of element lingers after CSS transition animation (Safari only?)

Question

I have a vertical menu system, that looks like...

The menu itself is laid out something like:

<div class="left_menu_sub_menu">
  <span class="left_menu_sub_menu_title">Some Heading</span>

  <ul>
    <li icon="4">RED</li>

     <div class="sub_level_1">
      <div class="sub_level_header" icon="5">The Greens!!</div>

      <ul menu-level="1">
        <li>GREEN</li>
        <li>GREEN</li>
        <li>GREEN</li>
      </ul>

    </div>

    <li icon="6">RED</li>
  </ul>
</div>

And the dividing line like:

<div class="left_menu_divider"></div>

with CSS:

.left_menu_divider {
    width: 90%;
    height: 1px;
    margin: 10px auto 0px auto;
    border-bottom: 1px solid rgba(247,247,247,0.2);
}

The CSS for the menu could fill multiple encyclopedia volumes, but the important bits are:

.left_menu_sub_menu>ul>li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    margin: 0px 0px 1px 0px;
    padding: 0px 6px 0px 42px;

    font-size: 13px;
    font-weight: bold;
    color: #FFF;

    cursor: pointer;

    position: relative;
}

.left_menu_sub_menu>ul>.sub_level_1 {
    width: 100%;
    position: relative;
}

.left_menu_sub_menu>ul>.sub_level_1>.sub_level_header {
    // identical to .left_menu_sub_menu>ul>li above
}

.left_menu_sub_menu>ul>.sub_level_1>ul {
    width: 240px;
    height: 0px;

    background-color: #252525;      

    overflow: hidden;

    position: static;               
    z-index: 1000;

    transition: height 0.4s linear 0;
}

There are further nested levels in the menu, but the pattern is the same, and transition for any expanding elements is identical.

When I expand the nested menu via javascript/jquery...

var calcHeight = sum.of.children.heights;
targetedUL.css('height', calcHeight);

... it works great, and looks like...

I collapse the menu(s) in the same way, and the result is...

Notice that there are multiple ghost images left from the divider line. They vary in spacing, as well as opacity. Sometimes collapsing the menu only produces a couple lines, and other times it produces as many as in the photo.

Changing the zoom of the page removes all the ghosted lines. The menu can also be collapsed horizontally...

... which also has the effect of removing the lingering lines.

The lingering lines are currently only showing up in Safari v9.1 - which seems to have an issue with redrawing after animations.