CSS transform-scale bugs

[Testare]

I know this isn't necessarily a bug since transform has "limited support." However, since the scale property is implemented to some degree, I thought I'd point these out.

Also keep in mind I don't have a ton of experience with how canvas elements work or how this library works, so my speculations might be off.

Bug reports:

https://jsfiddle.net/t3stare/yuaL5q53/1/

Element dimensions

When you render an element you get an image of the same dimensions of the element from the properties, but not the transform: For example, let's say you have an element with height=100px and width=100px. If you html2canvas(an-element,..) and an-element has "transform:scale(2,2)", it will transform the element to twice the size, but the image result is still 100x100 px and so only the top-left corner is rendered. Likewise, "transform:scale(0.5,0.5)" will transform it to half its size, but the image stays at 100x100px and so you have a lot of extra empty space in the image.

I can make a work-around for this by wrapping the transformed div into a div that has the same height but it is multiplied by the scale factor, and then rendering that div. This bug is probably easy to fix just by getting the transform factor when creating the canvas. However, that might be me assuming a bit much: It might get trickier with different transform origins.

Overflow hidden Border clipping

I know this must seem like such an edge case, but: If a child node of an element with overflow:hidden (which is rendered) is transformed using scale(negative number) to flip it, and then is positioned such that part of it is not actually rendered on the parent image, the other side of the node is clipped for the overlap. This bug does not seem to occur with overflow:visible.

Speculating, I'd say what is probably happening is the rendered image is being clipped by the bounding box before it is being transformed, and so the transformed product has premature clipping. If this were the case, other transform bugs could result from this as well. This bounding box clipping is different from user specified clipping, and so should probably be done separately (and after transformation is applied) to fix this bug.

Specifications:

• html2canvas v1.0.0-alpha.12
• Browser & version: Electron 1.7.5 (Which uses a pretty recent version of Chromium... So basically Google Chrome), Chrome 66
• Operating system: MacOS

[jianzhang810]

Have the same issue when using html2canvas to capture map with leaflet.