html - update - upcoming elections in india 2019




Chrome में HTML इनपुट कर्सर स्थिति मुद्दा जब मूल्य खाली होता है (6)

कारण:

ऐसा लगता है कि यह क्रोमियम 38 इंजन में एक प्रतिगमन बग है। मैं Chrome 38. और ओपेरा 25 में पुन: पेश कर सकता हूं। * (जो क्रोमियम 38 का उपयोग करता है)।

रिपोर्ट की गई बग:

जैसा कि @JackieChiles द्वारा बताया गया है कि यह इस का एक प्रतिगमन प्रतीत होता है [obselete के रूप में बंद] बग: code.google.com/p/chromium/issues/detail?id=47284

जैसा कि बंद बग में सुझाव दिया गया है, मैंने एक नया लॉग इन किया है। https://code.google.com/p/chromium/issues/detail?id=426802&thanks=426802&ts=1414143535

और एक अन्य रिपोर्ट किए गए बग को भी संदर्भित किया है जो एक ही बग को उजागर करता है, फिर भी जेनेरिक तरीके से सटीक मुद्दे को परिभाषित करने में विफल रहता है। https://code.google.com/p/chromium/issues/detail?id=394664

युक्ति:

जैसा कि वर्कअराउंड के ऊपर अन्य उत्तरों में विस्तृत है, पिक्सेल-आधारित line-height विशेषता का उपयोग करने से बचने के लिए। उदाहरण के लिए स्वैपिंग line-height:50px से line-height:1em या line-height:100% अधिक अपेक्षित व्यवहार देगा।

अभी हाल ही में मैंने Google Chrome में डिस्प्ले इश्यू वाले टेक्स्ट इनपुट पर ध्यान दिया है, लेकिन केवल टेक्स्ट खाली होने पर

ध्यान दें कि शीर्ष छवि में, इनपुट खाली होने पर, पाठ इनपुट के भीतर कर्सर बहुत अधिक है।

लेकिन एक बार जब हम कुछ पाठ लिखते हैं तो यह अपने आप सही हो जाता है:

JSFiddle करने के लिए JSFiddle Google Chrome संस्करण की आवश्यकता हो सकती है: 38.0.2125.101 मीटर

HTML:

<input name="tb_password" type="password" id="tb_password" class=" validate[required,custom[password]]" placeholder="Type your password here" autocomplete="off" style="
    margin: 0;
    line-height: 46px;
">

सीएसएस:

input[type="text"], input[type="password"] {
width: 100%;
height: 46px;
line-height: 46px;
font-size: 11pt;
color: #555 !important;
text-indent: 15px;
border-top: solid 1px #c5c5c5;
border-left: solid 1px #c5c5c5;
border-bottom: solid 1px #dadada;
border-right: solid 1px #dadada;
background: #fff;
-webkit-box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
box-shadow: inset 0px 1px 5px 0px rgba(0, 0, 0, .1);
}

2012 में, मैंने एक HTML5 कैनवास वेब ऐप बनाया और कर्सर के रूप में एक छवि का उपयोग करते समय कर्सर की स्थिति बदलने के लिए CSS3 की संपत्ति का उपयोग किया:

#canvas { cursor: url(../image/pen_red_ff0000.gif)0 20, auto; }

फ़ायरफ़ॉक्स, क्रोम / क्रोमियम और अन्य ब्राउज़रों पर मेरी परियोजना को विकसित करते हुए महीनों तक काम किया गया लेकिन कम से कम क्रोम 38 के बाद से, कर्सर की स्थिति में बदलाव को नजरअंदाज कर दिया गया। मैं क्रोमियम उबंटू संस्करण का उपयोग कर रहा हूं और आज, मैंने क्रोमियम 40 को अपडेट किया है और बग "रिस्कूट / क्रोमियम" को रिबूट और डिलीट करने के बाद भी यहां है।

उबंटू पैकेज का संस्करण "संस्करण 40.0.2214.94 उबंटू 14.04 (64-बिट)" है, लेकिन कुछ दिनों पहले मैंने नवीनतम आधिकारिक क्रोमियम लिनक्स "संस्करण 42.0.2287.0 (64-बिट)" को https://download-chromium.appspot.com/ chromium से आज़माया था। https://download-chromium.appspot.com/ और बग दिखाई नहीं दिया।

मेरा वेब ऐप यहाँ है http://drawcode.eu/projects/connect-points/ , आपको पॉइंट्स कनेक्ट करने हैं लेकिन उबंटू से क्रोमियम पर, मुझे पॉइंट्स के बीच में 20 पिक्सल क्लिक करने हैं। यह एक कर्सर स्थिति मुद्दा है इसलिए मुझे लगता है कि मेरी समस्या इस धागे से संबंधित है।

क्या कोई बग होने की पुष्टि कर सकता है और यह जान सकता है कि यह वास्तव में कब से है? ध्यान दें कि मैंने जो नवीनतम आधिकारिक क्रोमियम डाउनलोड किया है वह संस्करण 42 (स्थिर नहीं) है। उबंटू से मेरे क्रोमियम 40 में अभी भी बग है लेकिन @ साल्मोनेफेस ने कहा कि यह क्रोम में संस्करण 40 एचटीएमएल इनपुट कर्सर स्थिति में तय किया गया था जब यह मूल्य खाली है

संपादित करें: डेबियन पर, मेरे पास क्रोमियम 37 (38 नहीं) के साथ यह बग था! Chrome बीटा (संस्करण 41) पर बग अभी भी यहां है। यहाँ एक Fiddle http://jsfiddle.net/baptx/L0fmvs7a/

संपादन 2: वास्तव में CSS3 कर्सर स्थिति बग क्रोमियम 25 ( https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/171003/ ) में दिखाई दिया और यह क्रोमियम 42 में नियत किया गया लगता है ( https://commondatastorage.googleapis.com/chromium-browser-snapshots/index.html?prefix=Linux_x64/313000/ ), आप स्वयं मेरे HTML5 कैनवास ऐप को आज़मा सकते हैं और देख सकते हैं कि CSS3 कर्सर स्थिति गलत है। क्रोमियम 25 से क्रोमियम 36 (डेवलपर बिल्ड 261001 के साथ परीक्षण) से, फ़िडल I ने काम साझा किया लेकिन ब्राउज़र आपको एक अच्छे या गलत कर्सर की स्थिति वाले डिव पर पाठ का चयन करने की अनुमति देता है। क्रोमियम 41 से क्रोमियम 37 (डेवलपर बिल्ड 27271 के साथ परीक्षण किया गया) से, आप फिडल पर अच्छे कर्सर की स्थिति के साथ पाठ का चयन नहीं कर सकते।

बग केवल GNU / Linux प्लेटफ़ॉर्म नहीं है, यह विंडोज 8 वर्चुअल मशीन पर भी दिखाई देता है।


मुझे इसी तरह के मुद्दे का सामना करना पड़ा। लेकिन मैंने पाया कि लंबाई (px, em या rem) के बजाय line-height लिए संख्या का उपयोग करना बेहतर है। शायद निम्नलिखित कोड का उपयोग करके इस समस्या को ठीक करें:

input[type="text"] {
  height: 46px;
  line-height: 1.1;
}

इसके अलावा, शायद ऊपर css को -webkit-appaearance: none के साथ जोड़ा जाना चाहिए -webkit-appaearance: none वांछित रेंडरिंग प्रभाव के लिए -webkit-appaearance: none । वैसे भी, यह मेरे लिए काम करता है।


मेरा सुझाव है कि line-height उपयोग बिल्कुल न करें, यह उचित उत्तर नहीं हो सकता है, लेकिन इसके लिए मेरे लिए काम करना (नवीनतम क्रोम)

अद्यतित फिडिंग http://jsfiddle.net/efgq1svz/11/


सीएसएस शैली को line-height: 46px से पाठ इनपुट पर बदलना line-height: 46px से line-height: 1em समस्या का समाधान करता है; हालाँकि मैं अनिश्चित हूँ कि क्यों।


line-height:100% जोड़ना line-height:100% हमारे लिए समस्या को ठीक करता है:

http://jsfiddle.net/ddjj9wxc/







html-input