mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Canvas not rendering visible children of hidden element

Browse Source
This commit is contained in:
Vlad Tukhtarov 2022-03-31 11:27:19 +03:00
parent 6020386bbe
commit caa2b5671a
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/css/index.ts
View File

@ -231,6 +231,10 @@ export class CSSParsedDeclaration {
return this.display > 0 && this.opacity > 0 && this.visibility === VISIBILITY.VISIBLE;
}
isChildVisible(): boolean {
return this.display > 0 && this.opacity > 0;
}
isTransparent(): boolean {
return isTransparent(this.backgroundColor);
}

2
src/dom/node-parser.ts
View File

@ -25,7 +25,7 @@ const parseNodeTree = (context: Context, node: Node, parent: ElementContainer, r
childNode.assignedNodes().forEach((childNode) => parseNodeTree(context, childNode, parent, root));
} else {
const container = createContainer(context, childNode);
if (container.styles.isVisible()) {
if (container.styles.isChildVisible()) {
if (createsRealStackingContext(childNode, container, root)) {
container.flags |= FLAGS.CREATES_REAL_STACKING_CONTEXT;
} else if (createsStackingContext(container.styles)) {

5
src/render/canvas/canvas-renderer.ts
View File

@ -128,7 +128,7 @@ export class CanvasRenderer extends Renderer {
async renderStack(stack: StackingContext): Promise<void> {
const styles = stack.element.container.styles;
if (styles.isVisible()) {
if (styles.isChildVisible()) {
await this.renderStackContent(stack);
}
}
@ -476,7 +476,10 @@ export class CanvasRenderer extends Renderer {
}
// https://www.w3.org/TR/css-position-3/#painting-order
// 1. the background and borders of the element forming the stacking context.
const styles = stack.element.container.styles;
if (styles.isVisible()) {
await this.renderNodeBackgroundAndBorders(stack.element);
}
// 2. the child stacking contexts with negative stack levels (most negative first).
for (const child of stack.negativeZIndex) {
await this.renderStack(child);