search

cburgmer / rasterizeHTML.js

Renders HTML into the browser's canvas
http://cburgmer.github.io/rasterizeHTML.js
MIT License
2.45k stars 220 forks source link

css transform with matrix3d does not work correctly on iPad #208

Open phrixothrixa opened 4 years ago

phrixothrixa commented 4 years ago

Hello! Css transform with matrix3d does not work correctly on iPad. There is screenshots how it looks (the top picture in the screenshots is how the original html that I tried to 'rasterize' to canvas looks). In the desktop it's OK, but in iPad z-part of transformation is not in canvas.

rasterizehtml version: 1.3.0 iPadOS version: 11.0

Desktop desktop

iPad iPad

cburgmer commented 4 years ago

If you have some simple source code, we could look at this. However, my best guess is a browser bug in iOS here, with not much we can do on our side.

phrixothrixa commented 4 years ago

Hello! Here is an example. https://jsbin.com/notefufanu/1/edit?html,js,output

cburgmer commented 4 years ago

Thanks, sorry for the late reply.

It is possible that during the processing of the HTML some style information gets lost. To rule this out I created the intermediate SVG manually using rasterizeHTML.js locally: https://jsbin.com/vohibojemu/1/edit?html,js,output

I don't have an iPad to check, could you check whether the a) SVG, b) Canvas, or c) Image render differently? You'll notice that no dependency of rasterizeHTML.js is included.

cburgmer commented 4 years ago

It does look off on my latest Safari though, not just in the Canvas, but already in the image including the SVG as an data URI. This looks like a rendering error in Safari, and you could file a bug there.