バグレポート：
1.0.0-rc3の＃1451で同様の問題が発生しました。 私は次のようないくつかのメディアクエリ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の幅は、 <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： //github.com/niklasvh/html2canvas/blob/master/src/dom/document-cloner.ts#L429からcloneIframeContainer.width = (bounds.width + 1).toString(); 。 しかし、状況は変わりません。
もう1つ厄介なこと。 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
全てのコメント7件
IE11は実際にはブラウザではありません：;）
IE11ではhtml2canvasを使用すると、摩耗したものが大量に発生する可能性があります（とにかく私の経験です）。 最善の方法は、エッジにアップグレードするか、他の最新のブラウザを使用することです。
bjornol
2019年08月30日
実際、IE11の私のページのほとんどはh2cでうまく機能します。 しかし、この問題は私を怒らせます！ :(
jdsxzhao
2019年08月30日
気持ちがわかります ：）
bjornol
2019年08月30日
この問題を解決するための回避策を見つけました。 メディアクエリ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());
}
}
私も同じ問題に遭遇しました、あなたはこの問題を解決しましたか？
scq000
2019年12月25日
@jdsxzhao
scq000
2019年12月25日
私はこの問題に苦労してきました。上記で報告したように、以前の解決策では現在のコードベースの問題は修正されていないようですが、問題を解決するコードを配置する場所を見つけました。
close（）呼び出しの前にwidth + 1ハックを行うのではなく、iframeローダーpromise内に戻る直前に同様のことを行いました。
そのため、そのフラグメントは次のようになります。
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倍になり、再レンダリングを強制しようとしている場合はやり過ぎです。
私はまだこれを本番環境に展開していないので、テストで見つけられなかった副作用がまだある可能性がありますが、これまでのところ有望に見えます。
Robert-Laverick
2020年12月08日
関連する問題
stevencherry1
·
3コメント
anthonymejia
·
4コメント
arzyu
·
3コメント
Juliazhong
·
4コメント
koreanman
·
4コメント
最も参考になるコメント
IE11は実際にはブラウザではありません：;）
https://www.zdnet.com/article/microsoft-security-chief-ie-is-not-a-browser-so-stop-using-it-as-your-default/
IE11ではhtml2canvasを使用すると、摩耗したものが大量に発生する可能性があります（とにかく私の経験です）。 最善の方法は、エッジにアップグレードするか、他の最新のブラウザを使用することです。