Html2canvas: 미디어 쿼리를 처리할 때 IE11의 렌더링 오류

IE11은 실제로 브라우저가 아닙니다: ;)

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

html2canvas를 사용하는 IE11에서 마모된 작업이 많이 발생할 수 있습니다(어쨌든 내 경험). 가장 좋은 방법은 에지로 업그레이드하거나 다른 최신 브라우저를 사용하는 것입니다.

사실, IE11에 있는 대부분의 내 페이지는 h2c와 잘 작동합니다. 그러나이 문제는 나를 미치게 만듭니다! :(

그 느낌을 알아요 :)

이 문제를 해결할 수 있는 해결 방법을 찾았습니다. 이 문제의 근본 원인은 미디어 쿼리 CSS가 캐시 지우기 후에 잘 작동할 수 있기 때문에 IE의 캐시인 것 같습니다. 그래서 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

저는 이 문제로 어려움을 겪고 있으며 위에서 보고된 것처럼 이전 솔루션이 현재 코드베이스의 문제를 해결하지 못하는 것 같지만 문제를 해결하는 코드를 넣을 위치를 찾았습니다.

close() 호출 전에 width + 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를 곱하는 문자열 연결로 너비를 설정하는 것을 방지하기 위한 것입니다.

아직 프로덕션에 적용하지 않았기 때문에 테스트에서 포착하지 못한 부작용이 있을 수 있지만 지금까지는 상황이 유망해 보입니다.