iOS15 failed to generate picture

[H-Sven]

iOS15 failed to generate picture

In iOS15 system, it takes a long time to generate pictures, and the generated pictures lack content.

Lost all text and some pictures

[H-Sven]

Find the cause of the problem, because the HTML contains Chinese. Replace the Chinese with numbers or words to render normally

I hope to fix this bug as soon as possible

[H-Sven]

@niklasvh Please look at this question

[H-Sven]

My project is about to be published. This problem makes it impossible to publish

[niklasvh]

I don't have an iOS 15 device to test with and github actions don't support macos 11 / ios 15 simulators yet., so without being able to repro this it's quite difficult to start fixing it.

[niklasvh]

@H-Sven The iOS 15 simulator tests work fine with Chinese, see for example https://html2canvas.hertzen.com/tests/?browser=Safari_IOS_15&test=/tests/reftests/text/lang/chinese.html. Could you provide a repro of the bug on jsfiddle?

[H-Sven]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

[h330894169]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

https://github.com/niklasvh/html2canvas/issues/2547

Check "-apple-system" in "Font Family". In iOS 15, using "-apple-system" will cause canvas rendering to fail.

[H-Sven]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

https://github.com/niklasvh/html2canvas/issues/2547

Check "-apple-system" in "Font Family". In iOS 15, using "-apple-system" will cause canvas rendering to fail.

thank

[h330894169]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

https://github.com/niklasvh/html2canvas/issues/2547
Check "-apple-system" in "Font Family". In iOS 15, using "-apple-system" will cause canvas rendering to fail.

thank

是这个原因吗？我也不确定，是不是把 -apple-system 字体干掉就行了？

[H-Sven]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

https://github.com/niklasvh/html2canvas/issues/2547
Check "-apple-system" in "Font Family". In iOS 15, using "-apple-system" will cause canvas rendering to fail.

thank

是这个原因吗？我也不确定，是不是把 -apple-system 字体干掉就行了？

是的，我是vue项目，引入了vant组件， vant组件的样式里面设置了-apple-system字体，我给根元素设置了font family覆盖vant组件的font family就好了

[helsonxiao]

It's really working after -apple-system is removed!

[BradleyVangelder]

where can I remove the -apple-system

[wyysf123]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

https://github.com/niklasvh/html2canvas/issues/2547
Check "-apple-system" in "Font Family". In iOS 15, using "-apple-system" will cause canvas rendering to fail.

thank

是这个原因吗？我也不确定，是不是把 -apple-system 字体干掉就行了？

是的，我是vue项目，引入了vant组件， vant组件的样式里面设置了-apple-system字体，我给根元素设置了font family覆盖vant组件的font family就好了

在mac上safari15的预览版上，html2canvas会导致页面挂掉，我的代码里面也没有-apple-system字体。

[amqqliang]

@niklasvh I have found the reason for the bug!
This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

https://github.com/niklasvh/html2canvas/issues/2547

Check "-apple-system" in "Font Family". In iOS 15, using "-apple-system" will cause canvas rendering to fail.

Could you tell me how you found out?

[ArtemisGraphic]

I'm using an old version and I have this issue, I'm not using chinese fonts however, how do I fix this?

[gauravkeerthi]

This fix doesn't seem to work for me.
I don't have -apple-system declared as a font anywhere. Just in case, I set the root font-family for #app as a Google Font that I imported in the same css file. Still didn't work. I'm only using english fonts.
The function works fine on Android and Desktop, but fails on IOS15 (Chrome and Safari).

Any other ideas?

Debug trace on IOS15
https://www.dropbox.com/s/g1zh1flkxppimu7/image.png?dl=0

[ishowman]

@niklasvh I have found the reason for the bug! This is a bug caused by IOS 15 system font. The solution is to set "font family" in the root node

#app {
  font-family: Helvetica, Tahoma, Arial, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', STXihei, 'Microsoft YaHei',SimHei;
}

How do u know it is caused by font-family.It is amazing

[jacky-yanglei]

太牛了 这个问题困扰了我好久好久 终于解决了 我使用的是angular框架，使用的的UI框架默认加了 -apple-system

[hansanwok]

In my case, I define other font-family, I just remove 'san-serif'
font-family: 'Mulish', sans-serif;
=>> font-family: 'Mulish'