-webkit-transform

Question

के साथ इनपुट बॉक्स स्केलिंग मैंने निम्नलिखित सीएसएस को एक HTML इनपुट बॉक्स में बदल दिया।

-webkit-transform: scale(.5); 

जब मैं इनपुट बॉक्स में पाठ लिखें जब तक यह दृश्य क्षेत्र भरी है, कैरट इनपुट के किनारे अतीत जारी है और छिपा हुआ है। आम तौर पर आपके द्वारा टाइप किए जाने पर कैरेट और टेक्स्ट स्क्रॉल होगा।

कैरेट पूर्व-स्केल किए गए इनपुट की चौड़ाई समाप्त हो जाने के बाद पाठ अंततः स्क्रॉलिंग शुरू कर देता है। टेक्स्ट को स्क्रॉल करते समय गणना करते समय ब्राउज़र स्केलिंग को अनदेखा कर रहा है।

यह केवल वेबकिट ब्राउज़र (क्रोम और आईपैड के साथ परीक्षण) के साथ एक मुद्दा है। फ़ायरफ़ॉक्स में -मोज़-ट्रांसफॉर्म समकक्ष ठीक काम करता है। ज़ूम संपत्ति वेबकिट में ठीक काम करती है, लेकिन आईपैड पर स्केल करते समय यह लगभग चिकनी नहीं है, इसलिए मैं वास्तव में इसे अपने प्रोजेक्ट के लिए उपयोग नहीं कर सकता।

आप यहाँ एक उदाहरण देख सकते हैं: http://jsfiddle.net/4Kv6w/

पहले इनपुट बॉक्स -webkit-बदलने स्केलिंग के साथ है। दूसरा बॉक्स ज़ूम सेट के साथ है। तीसरा सामान्य है।

किसी भी मदद की सराहना की जाएगी।

EDIT - आप इनपुट बॉक्स को बाईं ओर ले जाने के लिए -webkit-transform का उपयोग करके स्केलिंग के बिना समस्या भी प्राप्त कर सकते हैं। यहां एक उदाहरण दिया गया है: http://jsfiddle.net/4Kv6w/15/

Answer 1

ऐसा लगता है कि एक इनपुट बॉक्स को बाईं ओर ले जाने के लिए सीएसएस ट्रांसफॉर्म का उपयोग करते समय वेबकिट में एक बग है। जब आप एक इनपुट बॉक्स को स्केल करते हैं, तो यह अनिवार्य रूप से दाएं किनारे को बाईं ओर ले जाता है, इस तरह मैं समस्या का सामना कर रहा था।

मेरे लिए वैकल्पिक हल के लिए छोड़ दिया

left: -2000px; 
position: absolute; 

लिए इनपुट बॉक्स रास्ता स्थित करने के लिए और फिर इसे स्थानांतरित सीएसएस के साथ वापस बदलना था।

-webkit-transform: matrix(.5, 0, 0, .5, 2000, 0); 

आप यहाँ एक उदाहरण देख सकते हैं: http://jsfiddle.net/4Kv6w/17/

Answer 2

अरे मुझे लगता है कि आप परिवर्तन को एनिमेट करने की कोशिश कर रहे हैं। अगर ऐसा होता है तो आपके पास ट्रांसफॉर्म की बजाय सीएसएस संक्रमण का उपयोग करने के बेहतर परिणाम होंगे। मैंने आपके लिए यह देखने के लिए एक पहेली बनाई है और इसे अपने लिए आज़माएं।

jsfiddle

मूल रूप से, मैं एक js घटना जब पाठ बॉक्स ध्यान केंद्रित हो जाता है के लिए सुन श्रोता है। फिर मैं जेएस में चौड़ाई बदलता हूं और संक्रमण एनीमेशन का ख्याल रखता है। उम्मीद है कि यह आपकी समस्या का ख्याल रखता है।