Html2canvas: عرض خطأ في IE11 عند التعامل مع استعلام الوسائط

تم إنشاؤها على ٣٠ أغسطس ٢٠١٩ · 7تعليقات · مصدر: niklasvh/html2canvas

تقارير الأخطاء:

لقد واجهت مشكلة مشابهة مع # 1451 في 1.0.0-rc3. لدي بعض استعلام الوسائط css مثل

<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) {}

في Chrome و Edge ، تكون نتيجة التجسيد مثالية. ولكن في IE11 ، تبدو النتيجة في شاشة صغيرة. يتطابق عرض div مع استعلام الوسائط مع css في <strong i="12">@media</strong> screen and (max-width: 980px) {} .
ثم قمت بمراجعة المكتبة باتباع الاتجاه في https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 الذي يراجع https: //github.com/niklasvh/html2canvas/blob/master/src/dom/document-cloner.ts#L429 إلى 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 ، يعمل العرض بشكل جيد. مع مزيد من البحث. لقد وجدت أنه إذا فتحت config 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 في ٣٠ أغسطس ٢٠١٩

😄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 في ٣٠ أغسطس ٢٠١٩

😄3 👀1

في الواقع ، تعمل معظم صفحتي في IE11 بشكل جيد مع h2c. ومع ذلك ، هذه المشكلة تدفعني للجنون! :(

jdsxzhao في ٣٠ أغسطس ٢٠١٩

انا اعرف الشعور :)

bjornol في ٣٠ أغسطس ٢٠١٩

لقد وجدت حلاً لحل هذه المشكلة. يبدو أن السبب الجذري لهذه المشكلة هو ذاكرة التخزين المؤقت في IE لأن استعلام الوسائط css يمكن أن يعمل بشكل جيد بعد مسح ذاكرة التخزين المؤقت. لذا قبل 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 في ٢ سبتمبر ٢٠١٩

لقد واجهت أيضًا نفس المشكلة ، هل حللت هذه المشكلة؟

scq000 في ٢٥ ديسمبر ٢٠١٩

تضمين التغريدة

scq000 في ٢٥ ديسمبر ٢٠١٩

لقد كنت أعاني من هذه المشكلة ، وعلى الرغم من أنه كما ورد أعلاه ، لا يبدو أن الحلول السابقة تعمل على حل المشكلة مع قاعدة التعليمات البرمجية الحالية ، فقد وجدت مكانًا لوضع الكود الذي يعمل على حل المشكلة.

بدلاً من القيام باختراق العرض + 1 قبل استدعاء الإغلاق () ، قمت بشيء مماثل قبل الإرجاع داخل محمل iframe ، هنا:

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 وهو أمر مبالغ فيه عندما نحاول فقط فرض إعادة تصيير.

لم أقم بإدخال هذا في الإنتاج حتى الآن ، لذلك قد تكون هناك آثار جانبية لم ألاحظها في الاختبار ، لكن الأمور تبدو واعدة حتى الآن.