Recently ios15 system is about to be launched, the company’s app began to test the compatibility of ios15, and then there was a screenshot of the page stuck white screen.

The business scenario is as follows: we will have multiple screenshots for each page using the html2Canvas plug-in.

1. Screenshot method is as follows:

Function catchPicture (obj) {var imgUri = ""; var scale = 1; var dom = document.querySelector(obj.dom); return new Promise(function (success, fail) { html2canvas(document.querySelector(obj.dom), { scale: scale, width: dom.offsetWidth, height: dom.offsetHeight }).then(function (canvas) { imgUri = canvas.toDataURL("image/png", 0); if (imgUri) { success(imgUri); } else { fail("error"); }}); }); };Copy the code

2. Call method is as follows:

catchPicture({
     dom: "body"
}).then(function (catchData) {})
Copy the code

3. Problem phenomenon:

When a page takes a screenshot, and then goes to the second screenshot, the page will have a blank screen. This problem is always present, and it is the same in ios browsers.

4. Solutions:

After a lot of theory of debugging, still can not find out the reason, because neither an error page is not sure where is the line of code gets stuck, finally can only use stupid way, to block the page HTML structure, leaving only the structure of the two screenshots, fortune comes suddenly, page BuKa, capture a success, is that can prove to be caused by a dom structure of the page?

Because the page is relatively complex, after more than 10 rounds of shielding combination, it is finally determined to be located in button. Then, what will be the impact of the style of button?

Font-size: 16px; font-family: system-UI: normal; font-family:system-ui: normal; font-family:system-ui: normal; font-family:system-ui: normal; As expected after shielding it can, the page operation is very smooth.

Let’s take a look at what this style actually means.

System-ui is a general font series. It selects the default system font under the current operating system. Its advantage is that it matches the font used by the current system and can make the style of Web pages and App look more unified.

Although it appears late, it is still compatible on can I use. Why is it available on ios15? At present, there are few ios15 materials to find, as for why there is a problem when the second canvas appears on the page? It remains to be explored.

Record the current treatment plan:

Var isiOS =!! navigator.userAgent.match(/\(i[^;] +; ( U;) ? CPU.+Mac OS X/); / / if the ios terminal (isiOS) {var ios_ver = parseInt (the navigator. UserAgent. ToLowerCase () the match (/ CPU iphone OS (. *?) like mac os/)[1].replace(/\_/g, '.')); if (ios_ver >= 15) { if ($('button')) { $('button').css('font-family', 'PingFangSC-Regular'); }}}Copy the code