Html2canvas: Render error di IE11 saat menangani kueri media

Dibuat pada 30 Agu 2019 · 7Komentar · Sumber: niklasvh/html2canvas

Laporan bug:

Saya mengalami masalah serupa dengan #1451 di 1.0.0-rc3. Saya memiliki beberapa css kueri media seperti

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

Di Chrome dan Edge, hasil rendernya sempurna. Tapi di IE11, hasilnya seperti di layar kecil. Lebar div dengan kueri media cocok dengan css di <strong i="12">@media</strong> screen and (max-width: 980px) {} .
Kemudian saya merevisi perpustakaan mengikuti arahan di https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 yang merevisi https: //github.com/niklasvh/html2canvas/blob/master/src/dom/document-cloner.ts#L429 hingga cloneIframeContainer.width = (bounds.width + 1).toString(); . Tapi situasinya tidak berubah.

Satu hal lagi yang aneh. Situasi di https://stackoverflow.com/questions/31793507/html2canvas-renders-page-with-wrong-layout-in-ie11-whed-devtools-not-opened#comment92407156_31800273 juga terjadi pada saya. Saat membuka devtools, render berfungsi dengan baik. Dengan penelitian lebih lanjut. Saya menemukan bahwa jika saya membuka konfigurasi Always refresh from server , itu dapat berfungsi dengan baik, tetapi tanpa itu kueri media akan salah.

versi html2canvas diuji dengan: 1.0.0-rc3
Peramban & versi: IE11
Sistem operasi: Win10

Sumber

jdsxzhao

Komentar yang paling membantu

IE11 benar-benar bukan browser: ;)

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

Banyak hal usang dapat terjadi di IE11 dengan html2canvas (pengalaman saya sih). Cara terbaik adalah mengupgrade ke edge atau menggunakan browser modern lainnya.

bjornol pada 30 Agu 2019

😄3 👀1

Semua 7 komentar

IE11 benar-benar bukan browser: ;)

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

Banyak hal usang dapat terjadi di IE11 dengan html2canvas (pengalaman saya sih). Cara terbaik adalah mengupgrade ke edge atau menggunakan browser modern lainnya.

bjornol pada 30 Agu 2019

😄3 👀1

Faktanya, sebagian besar halaman saya di IE11 bekerja dengan baik dengan h2c. Namun, masalah ini membuatku gila! :(

jdsxzhao pada 30 Agu 2019

aku tahu perasaan itu :)

bjornol pada 30 Agu 2019

Saya telah menemukan solusi untuk menyelesaikan masalah ini. Tampaknya akar penyebab masalah ini adalah cache di IE karena css kueri media dapat berfungsi dengan baik setelah menghapus cache. Jadi sebelum init h2c, saya mengambil semua tag tautan tentang css dan menambahkan stempel waktu setelah href. Akibatnya, ketika h2c mengambil kembali sumber daya statis ini, ia akan mengambil dari server alih-alih cache.

            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 pada 2 Sep 2019

Saya juga mengalami masalah yang sama, apakah Anda sudah memecahkan masalah ini?

scq000 pada 25 Des 2019

@jdsxzhao

scq000 pada 25 Des 2019

Saya telah berjuang dengan masalah ini, dan sementara seperti yang dilaporkan di atas solusi sebelumnya tampaknya tidak memperbaiki masalah dengan basis kode saat ini, saya telah menemukan tempat untuk meletakkan kode yang menyelesaikan masalah.

daripada melakukan hack lebar + 1 sebelum panggilan close() saya telah melakukan sesuatu yang serupa tepat sebelum pengembalian di dalam janji pemuat iframe, di sini:

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

Jadi fragmen itu sekarang terlihat seperti ini:

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 adalah untuk menghindari pengaturan lebar dengan penggabungan string, yang mengalikan lebar dengan 10x yang berlebihan ketika kita hanya mencoba memaksa rendering ulang.

Saya belum meluncurkan ini ke produksi sehingga mungkin ada efek samping yang belum saya tangkap dalam pengujian saya, tetapi sejauh ini semuanya terlihat menjanjikan.