Perché la transizione è stata avviata con l'autofocus?

Ho creato un modulo di contatto che utilizza autofocus="autofocus". Ho notato una cosa strana, quando una forma ha l'autofocus, la transizione sul mio nav è accesa. L'ho notato solo in Firefox. C'è qualcosa che ho fatto di sbagliato o è proprio come si comporta firefox (bug)?Perché la transizione è stata avviata con l'autofocus?

With autofocus (refresh della pagina)
Without autofocus

MODULO:

<form method="post" action="" id="contactForm"> 
    <textarea id="contactF" name="message" tabindex="1" placeholder="Type your message here" required="required"></textarea> 
    <input type="submit" id="contactS" name="submit" value="Send" tabindex="3" /> 
    Your Name: <input type="text" id="contactN" name="name" tabindex="2" placeholder="Type your Name" required="required" /> 
</form>

CSS per Nav:

#menu ul li { 
    width: 251px; 
    text-align:center; 
    display: inline-block; 
    background: #ddd; 
    height: 30px; 
    line-height: 30px; 
    box-shadow: 126px 0 0px 0px #000 inset, -126px 0 0px 0px #000 inset; 
    -webkit-transition: all 400ms ease-in; 
    -moz-transition: all 400ms ease-in; 
    -o-transition: all 400ms ease-in; 
    transition: all 400ms ease-in; 
} 

} 

#menu ul li:hover, #menu li.active { 
    box-shadow: 0 0 0px 0px #000 inset, -0 0 0px 0px #000 inset; 
} 

#menu ul a:link,#menu ul a:visited { 
    display: block; 
    font-size: 17px; 
    width: 251px; 
    text-decoration: none; 
    font-weight: bold; 
    color: #6DB7B5; 
    margin:0 auto; 
    -webkit-transition: all 400ms ease-out; 
    -moz-transition: all 400ms ease-out; 
    -o-transition: all 400ms ease-out; 
    transition: all 400ms ease-out; 
} 

#menu ul a:hover, #menu li.active a { 
    color: #FF6181; 
}

fonte

2013-05-04 Dharman

Entrambi i casi mostrano lo stesso comportamento per me (Firefox 20.0.1, Win 7) – CBroe

senza e con messa a fuoco automatica l'animazione è sparato su. –

Penso che il problema sia legato alla velocità di Firefox. Io uso firefox 20.0.1 Win 7 – Dharman

Ok nuovo tentativo, dopo qualche lettura ho scoperto che potrebbe essere un problema generale con le transizioni. C'è una sola correzione se questo accade.

si deve aggiungere una classe al vostro corpo

<body class="preload">

questa classe ottiene nessuna transizione a tutti

.preload * { 
    -webkit-transition: none !important; 
    -moz-transition: none !important; 
    -ms-transition: none !important; 
    -o-transition: none !important; 
}

E alla fine è necessario rimuovere la classe di precarico con un po 'js.

$("window").load(function() { 
    $("body").removeClass("preload"); 
});

Spero che questo aiuti, il feedback sarebbe bello

fonte

2013-05-04 19:53:25

Ma questo cambierà l'output. Non verrà visualizzato nel modo in cui deve essere visualizzato ora. – Dharman

a scusate, un po 'in ritardo ... guardandolo. –

Funziona, quindi premo che si tratta di un bug di Firefox, giusto? – Dharman

Perché la transizione è stata avviata con l'autofocus?

risposta

Problemi correlati