html - Why is transition started up with autofocus? -
i created contact form uses autofocus="autofocus"
. have noticed weird thing, when form has autofocus transition on nav fired up. have noticed in firefox. there did wrong or how firefox behaves(bug)?
with autofocus (refresh page)
without autofocus
form:
<form method="post" action="" id="contactform"> <textarea id="contactf" name="message" tabindex="1" placeholder="type message here" required="required"></textarea> <input type="submit" id="contacts" name="submit" value="send" tabindex="3" /> name: <input type="text" id="contactn" name="name" tabindex="2" placeholder="type name" required="required" /> </form>
css 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: 400ms ease-in; -moz-transition: 400ms ease-in; -o-transition: 400ms ease-in; transition: 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: 400ms ease-out; -moz-transition: 400ms ease-out; -o-transition: 400ms ease-out; transition: 400ms ease-out; } #menu ul a:hover, #menu li.active { color: #ff6181; }
ok new try, after reading found out general problem transitions. there 1 fix if happens.
you have add class body
<body class="preload">
this class gets no transition @ all
.preload * { -webkit-transition: none !important; -moz-transition: none !important; -ms-transition: none !important; -o-transition: none !important; }
and in end have remove preload class little js.
$("window").load(function() { $("body").removeclass("preload"); });
hope helps, feedback nice
Comments
Post a Comment