All geek questions in one place

Why did the auto focus transition begin?

I created a contact form that uses autofocus="autofocus" . I noticed a strange thing, when the form has autofocus, the transition to my navigation starts. I noticed this only in Firefox. Is there something I did wrong, or is it just how Firefox behaves (error)?

THE FORM:

 <form method="post" action="" id="contactForm"> <textarea id="contactF" name="message" autofocus="autofocus" 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 for 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; }
+6
source share
1 answer

Ok, give it a try, after some reading, I found out that this could be a common transition problem. If this happens, there will be only one fix.

you need to add a class to your body

 <body class="preload">

this class gets no transition

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

And in the end you need to remove the preload class using js.

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

Hope this helps, feedback will be pleasant

+2
source

Source: https://habr.com/ru/post/944283/

More articles:


All Articles