Html2canvas: मीडिया क्वेरी से निपटने के दौरान IE11 में रेंडर एरर

को निर्मित 30 अग॰ 2019 · 7टिप्पणियाँ · स्रोत: niklasvh/html2canvas

दोष रिपोर्ट:

मुझे 1.0.0-rc3 में #1451 के साथ एक समान समस्या का सामना करना पड़ा है। मेरे पास कुछ मीडिया क्वेरी सीएसएस है जैसे कि

<strong i="7">@media</strong> screen and (min-width: 1360px) {
...
}
<strong i="8">@media</strong> screen and (max-width: 1575px) {}
<strong i="9">@media</strong> screen and (max-width: 980px) {}

क्रोम और एज में, रेंडर परिणाम एकदम सही है। लेकिन IE11 में, परिणाम छोटे पर्दे जैसा दिखता है। मीडिया क्वेरी के साथ div की चौड़ाई <strong i="12">@media</strong> screen and (max-width: 980px) {} में css से मेल खाती है।
फिर मैं https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 जो https को संशोधित करता हूं, में दिशा का पालन करते हुए पुस्तकालय को संशोधित करता हूं cloneIframeContainer.width = (bounds.width + 1).toString(); । लेकिन स्थिति नहीं बदली है।

एक और अजीब बात। https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 की स्थिति भी मेरे साथ हुई। जब devtools खोलते हैं, तो रेंडर अच्छी तरह से काम करता है। आगे के शोध के साथ। मैंने पाया कि अगर मैं कॉन्फिग Always refresh from server खोलता हूं, तो यह अच्छी तरह से काम कर सकता है, लेकिन इसके बिना मीडिया क्वेरी गलत हो जाएगी।

html2canvas संस्करण के साथ परीक्षण किया गया: 1.0.0-rc3
ब्राउज़र और संस्करण: IE11
ऑपरेटिंग सिस्टम: Win10

स्रोत

jdsxzhao

सबसे उपयोगी टिप्पणी

IE11 वास्तव में एक ब्राउज़र नहीं है: ;)

https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/

IE11 में html2canvas (वैसे भी मेरा अनुभव) के साथ घिसे-पिटे सामान का आवंटन हो सकता है। सबसे अच्छा तरीका है एज में अपग्रेड करना या अन्य आधुनिक ब्राउज़र का उपयोग करना।

bjornol 30 अग॰ 2019

😄3 👀1

सभी 7 टिप्पणियाँ

IE11 वास्तव में एक ब्राउज़र नहीं है: ;)

https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/

bjornol 30 अग॰ 2019

😄3 👀1

वास्तव में, IE11 में मेरा अधिकांश पृष्ठ h2c के साथ अच्छा काम करता है। हालाँकि, यह समस्या मुझे पागल कर देती है! :(

jdsxzhao 30 अग॰ 2019

मुझे भाव का बोध :)

bjornol 30 अग॰ 2019

मुझे इस समस्या को हल करने के लिए एक समाधान मिला है। ऐसा लगता है कि इस समस्या का मूल कारण आईई में कैश है क्योंकि मीडिया क्वेरी सीएसएस स्पष्ट कैश के बाद अच्छी तरह से काम कर सकती है। तो init h2c से पहले, मैं css के बारे में सभी लिंक टैग लाता हूं और href के बाद टाइमस्टैम्प जोड़ता हूं। परिणामस्वरूप, जब h2c इन स्थिर संसाधनों को पुनः प्राप्त करता है, तो यह कैश के बजाय सर्वर से प्राप्त करेगा।

            var links = document.getElementsByTagName('link');
            for(var i in links){
                if(links[i].href){
                    links[i].href = (links[i].href + "?timestamp=" + new Date().getTime());
                }
            }

jdsxzhao 2 सित॰ 2019

मैं भी इसी समस्या से मिला हूँ, क्या आपने इस समस्या का समाधान किया है?

scq000 25 दिस॰ 2019

@jdsxzhao

scq000 25 दिस॰ 2019

मैं इस मुद्दे से जूझ रहा हूं, और जैसा कि पिछले समाधानों के ऊपर बताया गया है, वर्तमान कोडबेस के साथ इस मुद्दे को ठीक करने के लिए प्रतीत नहीं होता है, मुझे कोड डालने के लिए एक जगह मिली है जो इस मुद्दे को हल करती है।

बंद() कॉल से पहले चौड़ाई + 1 हैक करने के बजाय मैंने आईफ्रेम लोडर वादे के अंदर वापसी से ठीक पहले कुछ ऐसा ही किया है, यहां:

https://github.com/niklasvh/html2canvas/blob/3982df1492bdc40a8e5fa16877cc0291883c8e1a/src/dom/document-cloner.ts#L100

तो वह टुकड़ा अब इस तरह दिखता है:

if (documentClone.fonts && documentClone.fonts.ready) {
  await documentClone.fonts.ready;
}

iframe.width = parseInt(iframe.width) + 1;

if (typeof onclone === 'function') {
  return Promise.resolve()
    .then(() => onclone(documentClone))
    .then(() => iframe);
}

parseInt स्ट्रिंग कॉन्सटेनेशन द्वारा चौड़ाई निर्धारित करने से बचने के लिए है, जो चौड़ाई को 10x से गुणा करता है जो कि अधिक है जब हम फिर से प्रस्तुत करने के लिए मजबूर करने की कोशिश कर रहे हैं।

मैंने अभी तक इसे उत्पादन के लिए रोल आउट नहीं किया है, इसलिए अभी भी ऐसे दुष्प्रभाव हो सकते हैं जिन्हें मैंने अपने परीक्षण में नहीं पकड़ा है, लेकिन चीजें अब तक आशाजनक दिख रही हैं।

Robert-Laverick 8 दिस॰ 2020

क्या यह पृष्ठ उपयोगी था?

0 / 5 - 0 रेटिंग्स

Html2canvas: मीडिया क्वेरी से निपटने के दौरान IE11 में रेंडर एरर

दोष रिपोर्ट:

सबसे उपयोगी टिप्पणी

IE11 वास्तव में एक ब्राउज़र नहीं है: ;)

सभी 7 टिप्पणियाँ

IE11 वास्तव में एक ब्राउज़र नहीं है: ;)

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