3

el código del ejemplo no funciona en Safari pero sí lo hace en Google Chrome, puede que no sea compatible con éste navegador? O el problema es de mi versión de Safari? Debería ser que cuando se introduce el puntero dentro del Cuadrado Rojo se activa la secuencia de funciones descrita en el javascript en el tiempo elegido y sin embargo tarda 20 veces más en safari.

$(document).ready(function() {
  $(".trigger").on({
    mouseenter: function() {
      setTimeout(function() {
          $('.position').css({
            '-webkit-text-stroke-width': '5px',
            '-webkit-text-stroke-color': 'rgba(0,170,209,0.20)'
          })
        },
        1500);
      setTimeout(function() {
          $('.position').css({
            '-webkit-text-stroke-width': '15px',
            '-webkit-text-stroke-color': 'rgba(0,170,209,0.10)'
          })
        },
        1000);
      setTimeout(function() {
          $('.position').css({
            '-webkit-text-stroke-width': '30px',
            '-webkit-text-stroke-color': 'rgba(0,170,209,0.10)'
          })
        },
        500);
    },
  });
});
body {
  margin: 0;
  font-size: 4px;
  color: rgba(0, 170, 209, 1.00);
  font-weight: bold;
  background: rgba(228, 0, 253, 1.00);
}
.position2 {
  font-weight: bold;
  margin-right: auto;
  margin-left: auto;
}
#wraperito {
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="trigger" style="width:100px;height:100px; border:red solid 1px; float:left; position:fixed; margin-top:0px;"></div>
<div id="wraperito">
  <pre class="position">
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^llccd----A^A^^^YAAY^AA^^AAYd,;cd^^^ll'..   .;l-AAAdc^l;:^^dAd^ddll^l;:l,    .... ...   .......,...'::'  ..'...   .,:::ldAAAAAAAAA^YY^AYY^-
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ddd^^^^^^^^^^^^^^^^^^^^^^d^^^^^ddd^^^^llll^----d-^YYYAAAYY^AAA-^-^-l::cc:lc...   ':^-AAAAdd^cc^^^^^d--ll^cc^l'   ...   ...  ...........',,.   .....    
  </pre>
</div>

10

1 respuesta 1

3

El error es la función setTimeout, que por alguna razón falla en Safari, tanto mobile como en desktop.

Te recomiendo utilizar .bind, te queraría algo así

setTimeout(function() {
 $('.position').css({
            '-webkit-text-stroke-width': '5px',
            '-webkit-text-stroke-color': 'rgba(0,170,209,0.20)'
          })
}.bind(this),1500);

Por otro lado, -webkit no funciona en firefox, para eso debes usar -moz , te recomiendo usar la página http://caniuse.com/#search=webkit para ver que funcionalidades se pueden usar en qué navegadores! Saludos!

0

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.