html - transicion - transition opacity css

La transición CSS no funciona en Safari(usando flexbox y transform)

Question

Hice una transición CSS para los elementos de navegación en mi navegador principal de páginas web.

Es un efecto simple relativly que usa los elementos antes del elemento para enmascarar y ocultar el texto usando css transforma y flexbox.

Desarrollé en Chrome y probé en Firefox y Safari (todas las versiones más recientes) y tuve que descubrir que Safari no muestra la transición correctamente.

Creé un bolígrafo corto, para que pueda hacerse una idea del efecto.

http://cssdeck.com/labs/owntbier

Hay alguna manera de arreglarlo? Supongo que tiene algo que ver con la forma en que Safari interpreta la propiedad "justificar-contenido".

Aquí está el Código:

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;
  }
}

NOTA Los prefijos de proveedor necesarios son agregados automáticamente por mi preprocesador

Answer 1

Su código tampoco funcionará en Internet Explorer 9. todo lo que necesitas agregar es ::

Para Safari--

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

Para IE9--

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

Espero que funcione.