2010-12-02 14 views
5

किसी साइट पर सीमा-छवि सीएसएस संपत्ति का उपयोग करना आईपैड पर अजीब प्रतिपादन कलाकृतियों का उपयोग कर रहा है (मानते हैं कि सभी आईओएस उपकरणों में एक ही समस्या है)। यह अनिवार्य रूप से छोटी लाइनें जोड़ रहा है जहां सीएसएस के अनुसार छवि कटाई जा रही है। संदर्भ के रूप में छवि देखें: alt textआईपैड वेबकिट सीमा-छवि सीएसएस प्रतिपादन समस्या

कुछ चीजों को करने से रेखाएं गायब हो जाएंगी जैसे ज़ूम इन करने या उस div को स्थानांतरित करने के लिए जो मैंने इसे लागू किया है। मुझे लगता है कि यह मोबाइल सफारी में एक प्रतिपादन बग है, लेकिन क्या किसी को इसे ठीक करने के तरीके पर कोई विचार/सुझाव है?

मैं जोड़ सकते हैं कि इस गुण का समर्थन सभी डेस्कटॉप ब्राउज़र में सही ढंग से प्रस्तुत करता है: सफारी, क्रोम, फ़ायरफ़ॉक्स, आदि

उत्तर

8

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

अपने सिर को जोड़ने का प्रयास करें:

<meta name="viewport" content="initial-scale=1"> 

इस तरह डिफ़ॉल्ट दृश्य अच्छा होगा। आप ज़ूमिंग को भी अक्षम कर सकते हैं, लेकिन मैं इसकी अनुशंसा नहीं करता जब तक कि यह विशेष रूप से आईपैड के लिए डिज़ाइन की गई वेबसाइट न हो।

+0

हाँ, यह है कि यह किया - टिप के लिए धन्यवाद! – beardedd

+0

मेरे लिए भी! बहुत बढ़िया जवाब! –

+0

धन्यवाद! इसने मेरे लिए भी एक समस्या हल की। मेरे पास पृष्ठभूमि छवि के रूप में बेस 64 एन्कोडेड एसवीजी था और यह सभी ब्राउज़रों में डेस्कटॉप पर ठीक है। सफारी और क्रोम दोनों में आईपैड एयर पर छवि के प्रत्येक दोहराव के आसपास 1px सीमा के कारण इसे "ग्रिड" के रूप में प्रस्तुत किया गया। हेड बैंगिंग के 2 घंटे आपके जवाब के साथ यहां समाप्त हुए। @ डुओपिक्सल आप रॉक। –

1

ज़ूमिंग में किए गए चित्र स्केलिंग छवि में अगले पिक्सेल से शोर लेते हैं (शायद एक गोल समस्या?)। छवि भागों में बफर की एक 1 पीएक्स लाइन जोड़ना मेरे लिए काम करता है।

+0

टिप के लिए धन्यवाद! अंततः मैं उस छवि के आस-पास से अतिरिक्त रिक्त स्थान को हटाकर अपनी समस्या को हल करने में सक्षम था जिसे मैं स्केल कर रहा था। – miek

+0

मैंने यह पता लगाने से पहले दीवार के खिलाफ अपने सिर को मारने में थोड़ी देर बिताई। अच्छी बात अगर मैंने आपको उस परेशानी को बचाया :)। – Marcus

2

यह हमें कुछ समय से परेशान कर रहा है।

हमने पाया है कि लाइनों गायब हो गया जब हम खिंचाव बजाय दोहराने या सीमा छवि मूल्य में दौर प्रयोग किया है: तो उदाहरण के लिए:

-webkit-border-image: url(image.png) 50 stretch; 

तुम खुद जाकर परीक्षण कर सकते हैं अपने आईओएस डिवाइस पर http://border-image.com/ और खींचने वाले पैरामीटर को स्विच करना।

(वहाँ ऑफसेट मूल्यों के साथ एक सा आसपास खेलते हैं, क्योंकि इस साइट के लेखक को आसानी से सीमा-छवि पहले से ही एक पृष्ठभूमि रंग जहां iOS डिवाइस पर आप पारदर्शी लाइनों मिलेगा है कि इस्तेमाल किया।)

0

इस समस्या को हल करने के लिए सीमा पर छवि पर हार्डवेयर त्वरण सक्षम:

-webkit-transform: translate3d(0, 0, 0)

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