Html2canvas: Ошибка рендеринга в IE11 при работе с медиа-запросом

Созданный на 30 авг. 2019 · 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 тоже случилась со мной. Когда открыты инструменты разработчика, рендер работает хорошо. При дальнейших исследованиях. Я обнаружил, что если я открою конфигурацию 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 может произойти множество изношенных вещей (по крайней мере, по моему опыту). Лучший способ - перейти на Edge или использовать другие современные браузеры.

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

Я нашел способ решения этой проблемы. Похоже, что основной причиной этой проблемы является кеш в IE, потому что css медиа-запросов может хорошо работать после очистки кеша. Поэтому перед запуском 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 перед вызовом close (), я сделал нечто подобное непосредственно перед возвратом внутри обещания загрузчика 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 заключается в том, чтобы избежать установки ширины конкатенацией строк, которая умножает ширину в 10 раз, что является излишним, когда мы просто пытаемся принудительно выполнить повторный рендеринг.

Я еще не развернул это в производственной среде, поэтому могут быть побочные эффекты, которые я не обнаружил при тестировании, но пока все выглядит многообещающе.