Dlaczego przejście zostało uruchomione z autofokusem?

Stworzyłem formularz kontaktowy, który używa autofocus="autofocus". Zauważyłem dziwne rzeczy, gdy forma ma autofocus przejście na mojej nawigacji jest uruchamiane. Zauważyłem to tylko w Firefoksie. Czy jest coś, co zrobiłem źle, czy też to, jak zachowuje się Firefox (błąd)?Dlaczego przejście zostało uruchomione z autofokusem?

With autofocus (odświeżania strony)
Without autofocus

POSTAĆ:

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

Źródło

2013-05-04 Dharman

Oba przypadki wyświetlać ten sam problem dla mnie (Firefox 20.0.1, Win 7) – CBroe

bez iz autofokusem animacja jest rozgrzana. –

Myślę, że problem jest związany z prędkością firefox. Używam firefox 20.0.1 Win 7 – Dharman

Ok nowa próba, po pewnym czytania i okazało się, że może być ogólny problem z przejściami. Jest tylko jedna poprawka, jeśli tak się stanie.

trzeba dodać klasę do swojego ciała

<body class="preload">

ta klasa nie dostaje przejście w ogóle

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

I w końcu trzeba usunąć klasę napięcia wstępnego z odrobiną JS.

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

Nadzieja to pomaga, feedback byłoby miło

Źródło

2013-05-04 19:53:25

Ale to zmieni dane wyjściowe. Nie będzie wyświetlany tak, jak powinien być teraz wyświetlany. – Dharman

Przepraszam, trochę późno ... patrząc na to. –

To działa, więc zakładam, że to błąd firefox, prawda? – Dharman

Dlaczego przejście zostało uruchomione z autofokusem?

Odpowiedz

Powiązane problemy