2013-05-04 7 views
6

मैं जो autofocus="autofocus" का उपयोग करता है एक संपर्क फ़ॉर्म बनाया। मैंने अजीब चीज देखी है, जब एक फॉर्म में ऑटोफोकस है जो मेरी नौसेना पर संक्रमण को निकाल दिया जाता है। मैंने इसे केवल फ़ायरफ़ॉक्स में देखा है। क्या कोई ऐसी चीज है जिसे मैंने गलत किया है या यह है कि फ़ायरफ़ॉक्स कैसे व्यवहार करता है (बग)?ऑटोफोकस के साथ संक्रमण क्यों शुरू हुआ है?

With autofocus (ताज़ा पेज)
Without autofocus

फार्म: नव के लिए

<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> 

सीएसएस:

#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; 
} 
+0

दोनों मामलों मेरे लिए एक ही व्यवहार प्रदर्शित किया जाएगा (फ़ायरफ़ॉक्स 20.0.1, विन 7) – CBroe

+0

बिना और ऑटोफोकस एनीमेशन ऊपर निकाल दिया जाता है के साथ। –

+0

मुझे लगता है कि यह मुद्दा फ़ायरफ़ॉक्स की गति से संबंधित है। मैं फ़ायरफ़ॉक्स 20.0.1 विन 7 – Dharman

उत्तर

2

ठीक नई कोशिश, कुछ पढ़ने के बाद मैं पता चला कि एक हो सकता है संक्रमण के साथ सामान्य समस्या। ऐसा होने पर केवल एक ही फिक्स है।

आप सभी

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

पर अपने शरीर

<body class="preload"> 

इस वर्ग के कोई संक्रमण हो जाता है करने के लिए एक वर्ग को जोड़ने के लिए है और अंत में आप एक छोटे से js साथ प्रीलोड वर्ग निकालना होगा।

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

आशा इस मदद करता है, प्रतिक्रिया अच्छा

+0

का उपयोग करता हूं लेकिन यह आउटपुट बदल देगा। यह अब प्रदर्शित होने के तरीके के रूप में प्रदर्शित नहीं किया जाएगा। – Dharman

+0

क्षमा करें, थोड़ी देर बाद ... इसे देख रहे हैं। –

+0

यह काम करता है, इसलिए मुझे लगता है कि यह एक फ़ायरफ़ॉक्स बग है, है ना? – Dharman

संबंधित मुद्दे