0

Quisiera saber como hacer para que en safari la animación de esta tabla se vea igual que en Firefox o Chorme. En chrome o firefox el borde aparece desde el centro de la tabla En safari la animación se repite en cada td (no tr)

Codepen: https://codepen.io/charlysole/pen/LLLqMv

tr {
  margin: 0 auto;
  padding: 2px;
  background-color: transparent;
  background-repeat: no-repeat;
      background-size: 100% 2px,0 0, 100% 100%;
  background-position: bottom center, top center, bottom center;
  -webkit-animation: drawBorderFromCenter 4s 0s;
  animation: drawBorderFromCenter 4s 0s;
  background-image: url('http://www.maharam.com/assets/site/swatches/red-8fbb3ee62104ec827fe7ac7b2fc0e5fcdec3376d215c390ff44383c936b869de.gif');
   color: black;
}

@-webkit-keyframes drawBorderFromCenter {
    from {
      background-size: 0 2px, 0 0, 100% 100%;
    }
    to {
      background-size: 100% 2px,0 0, 100% 100%;
    }
 }
<table>
  <tr>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td>Centro comercial Moctezuma</td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td>Ernst Handel</td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td>Island Trading</td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>

3
  • 1
    Deberías agregar el prefijo moz. Mira esta respuesta en inglés así como la documentación disponible. Commented el 22 jun. 2017 a las 17:37
  • Nada, sigue igual... en safari las líneas se dibujan desde el centro de cada celda de la tabla, mientras que en firefox chrome y demás lo hace dibujando la linea desde el centro de la fila entera (que es como se espera que se haga). El problema está en safari. Commented el 23 jun. 2017 a las 11:32
  • 1
    Carlos, si aplicaste los cambios según la documentación, debes editar tu pregunta con los cambios hechos - esto para que otros usuarios puedan probar también este bug. Commented el 23 jun. 2017 a las 16:02

1 respuesta 1

2

es posible que Safari no soporte ciertas propiedades css en los TR. Podrías hacer la prueba de insertar un DIV dentro de los TDs y aplicarle la animación a esos DIVS.

No tengo MAC y Safari para windows ya se dejó de actualizar hace mucho tiempo.

Aquí mi ejemplo y me comentas si lo puedes testear en Safari

https://jsfiddle.net/ffy64a40/

Saludos

3
  • Hola y gracias, por colaborar. He probado el código y el resultado en safari sigue siendo el mismo. Commented el 29 jun. 2017 a las 10:51
  • Hola, podrías darnos información sobre la versión de Safari? Aunque si quieres te puedo ofrecer un código para sustituir las tablas utilizando divs, de esa manera es seguro que te funcionará. Saludos Commented el 6 jul. 2017 a las 14:49
  • @JohanSchell La versión de Safari es la 10.1.1 Considerar que en la versión movil de Safari también ocurre lo mismo. Commented el 7 jul. 2017 a las 9:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.