CSS transition does not work in Safari (using flexbox and conversion)

Question

I made a css transition for navigation items on my main nav web pages.

This is a relational simple effect using elements before masking and hiding text using css transforms and flexbox.

I developed in Chrome and tested in Firefox and Safari (all recent versions) and should have found that Safari does not display the transition correctly.

I created a short pen so that you can get an idea of ​​the effect.

http://cssdeck.com/labs/owntbier

Is there any way to fix this? I guess this has something to do with how safari interprets the justify-content property.

Here is the code:

HTML

<div class="container">
  <ul>
    <li>WHY SAFARI, WHY?</li>
  </ul>
</div>

SCSS

.container{
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%)   translateY(-50%);
}

ul{
  list-style-type: none;
}

li{
  white-space: nowrap;
  position: relative;
  color: #ff9900;
  cursor: pointer;
  font-size: 5vw;
  font-weight: 900;

  &:hover{

    &:before{
      max-width: 100%;
    }
  }

  &:before{
    position:absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #131313;
    content: 'WHY SAFARI, WHY?';
    display: flex;
    justify-content: center;
    overflow: hidden;
    max-width: 0%;
    transition: max-width 0.5s ease;
  }
}

Answer 1

Internet Explorer 9. , :

Safari -

**-webkit-transform:translateX(-50%)   translateY(-50%);**

IE9 -

**-ms-transform:translateX(-50%)   translateY(-50%);**

, .