Google क्रोम - context.canvas.width/context.canvas.width कारण "ब्लू लेयर"

Question

मैंने क्रोम संस्करण 17 से क्रोम में अपग्रेड किया: 18.0.1025.142 आज।

मैंने देखा है कि मैं जिस वेब ऐप्स पर काम कर रहा हूं, उसमें एक अजीब नीली परत है जो लोड पर दिखाई देती है और फिर स्क्रॉलिंग शुरू होने पर गायब हो जाती है।

मैं अपने जे एस में निम्नलिखित लाइनों के लिए नीचे इस ट्रैक करने के बाद:

   context.canvas.width = canWidth; 
       context.canvas.height = canHeight; 

canWidth और canHeight गतिशील रूप से उत्पन्न कर रहे हैं।

इन पंक्तियों को टिप्पणी करने से नीली परत को प्रतिपादन से रोक दिया जाता है, हालांकि यह एक फिक्स नहीं है क्योंकि मुझे कैनवास चौड़ाई/ऊंचाई को नियंत्रित करने के लिए गतिशील रूप से जेनरेट किए गए मानों का उपयोग करने की आवश्यकता है।

मैंने context.canvas.width और context.canvas.height 600 को हार्ड कोडिंग करने का भी प्रयास किया और इससे नीली परत समस्या भी उत्पन्न हुई।

यह क्रोम के पिछले संस्करणों में कोई समस्या नहीं थी, और मुझे फ़ायरफ़ॉक्स में कोई समस्या नहीं है।

समस्या के बारे में कोई सुझाव क्या हो सकता है?

संपादित करें:

   context.clearRect (0 , 0 ,canWidth, canHeight); 
       context.canvas.width = canWidth; 
       context.canvas.height = canHeight;         
       context.beginPath(); 
       context.moveTo(x, y); 
       context.lineTo(nodeLeft, nodeTop); 
       context.strokeStyle = "#000000"; 
       context.lineCap = "round"; 
       context.stroke(); 

Answer 1

संपादित करें:

ठीक है, मैं यह मेरे लिए मिला है। ऐसा लगता है कि कुछ एएमडी ग्राफिक कार्डों में समस्या है। मैं उत्प्रेरक नियंत्रण केंद्र में क्रोम के लिए उच्च प्रदर्शन मोड बंद कर सकता था। यह मेरे लिए सबसे कष्टप्रद चीजों को तय करता है ... उम्मीद है कि यह अगले संस्करणों में तय किया जाएगा।

मोर जानकारी के लिए देखें: http://code.google.com/p/chromium/issues/detail?id=121658

---

यह एक समाधान नहीं है, लेकिन मैं एक ही समस्या का सामना करना पड़ रहा है और यह मेरे पागल गाड़ी चला रहा है। मैं इसे कम करने की कोशिश कर रहा हूँ।

समस्याएं:: मैं विभिन्न मशीनों पर differnt ब्राउज़र परीक्षण किया है

• ब्लू परतों (मैं केवल उन्हें देख अगर क्रोम को बड़ा नहीं है)
• गलत y स्क्रॉलबार (कभी कभी केवल तभी पता चलता है मैं टैब के माध्यम से स्विच करें)
• विकृत आकार। कैनवास और चित्रित छवियों/आकार का आकार क्रोम से दूसरे ब्राउज़र में भिन्न होता है। मतलब, कैनवास/आकार क्रोम पर छोटा है, यह ज्यादातर चौड़ाई को कम करता है।

निष्कर्ष 1: ऐसा लगता है कि यह क्रोम 18.x.x. के साथ हर मशीन पर नहीं होता है एक हार्डवेयर मुद्दा माना जाता है, लेकिन वास्तव में इसे वास्तव में बाधित नहीं कर सका।

निष्कर्ष 2: यदि मैं कैनवास का आकार 200 ऊंचाई/चौड़ाई तक सेट करता हूं, तो समस्याएं प्रकट नहीं होती हैं। यदि मैं इसे 200 से अधिक सेट करता हूं, तो यह कैनवास/आयताकार और अन्य समस्याओं को प्रदर्शित करेगा।

निष्कर्ष 3: समस्याओं केवल दिखाई देंगे, अगर कुछ कैनवास को drawed है या कुछ और सेट कर दिया जाता है, यानी फ़िलस्टाइल।

यहाँ परीक्षण के टुकड़े मैं प्रयोग किया है:

<canvas id="canvas" width="300" height="300" style="background-color:orange"></canvas> 
... 
ctx.fillRect (10, 10, 55, 50); 

Answer 2

आप दो पंक्तियों आपके द्वारा दिए गए की तुलना में अधिक कोड पोस्ट कर सकते हैं:

यहाँ जहां ऊपर बसता था (nodeLeft और nodeTop बाकी जहां उत्पन्न कर रहे हैं) कोड के ब्लॉक है ? मेरा मानना ​​है कि यह चौड़ाई/ऊंचाई निर्धारित करने के अलावा कुछ और है।

मेरे पास एक ड्राइंग एप्लिकेशन है जिसे मैं थोड़ी देर के लिए चालू और बंद कर रहा हूं जिसमें मैं बहुत कुछ करता हूं। केवल अंतर यह है कि मैं चौड़ाई और ऊंचाई निर्धारित करने से पहले context.scale(0,0); पर कॉल करता हूं। ब्लू ओवरले के साथ Google क्रोम के किसी भी संस्करण में मुझे कोई समस्या नहीं है। क्या आप संभवतः चौड़ाई और ऊंचाई निर्धारित करने से पहले संदर्भ के पैमाने मान को संशोधित कर रहे हैं?

उदा। यहाँ मैं क्या है, एक पूर्ण दस्तावेज ड्राइंग क्षेत्र के लिए चौड़ाई/ऊंचाई दस्तावेज़ के लिए कैनवास की स्थापना है:

context.scale(0,0); 
context.canvas.width = $(document).width(); 
context.canvas.height = $(document).height(); 

संपादित करें: मेरे फेरबदल साइट उल्लेख किया http://drawcomix.com पर है आप नीले ओवरले परीक्षण करने के लिए देखने के लिए अगर यह चाहते हैं, तो आपके ब्राउज़र या आपका कोड।

संपादित करें: अपने अतिरिक्त टिप्पणी के आधार पर ...

मुझे लगता है कि कैनवास स्पष्ट करने के लिए सबसे अच्छा तरीका सुझाव है कि वेब पर ट्यूटोरियल देखा है ऊंचाई/चौड़ाई सेट करने के लिए है। यह पूरी तरह से सच नहीं है। दस्तावेज़ लोड पर, यह तेज/सबसे आसान ऐसा करने के लिए तरीका हो सकता है, लेकिन माउस आंदोलनों पर, तो आप शायद बेहतर कर रहे हैं कुछ इस तरह कर रही है:

context.save(); 
context.setTransform(1,0,0,1,0,0); 
context.clearRect(0,0,width,height); // width/height of canvas 
context.restore(); 

आप setTransform की जरूरत नहीं हो सकती है यदि आप प्रदर्शन नहीं कर रहे कैनवास पर कोई भी परिवर्तन।

मुझे विश्वास है कि मुझे प्रो HTML5 प्रोग्रामिंग (अप्रेस) में यह समाधान मिला है, लेकिन मुझे यकीन नहीं है।