diff --git a/src/css/index.ts b/src/css/index.ts
index b338871..48cca37 100644
--- a/src/css/index.ts
+++ b/src/css/index.ts
@@ -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);
     }
diff --git a/src/dom/node-parser.ts b/src/dom/node-parser.ts
index 5f38a24..924fbf9 100644
--- a/src/dom/node-parser.ts
+++ b/src/dom/node-parser.ts
@@ -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)) {
diff --git a/src/render/canvas/canvas-renderer.ts b/src/render/canvas/canvas-renderer.ts
index 6efb648..0a9f6b6 100644
--- a/src/render/canvas/canvas-renderer.ts
+++ b/src/render/canvas/canvas-renderer.ts
@@ -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.
-        await this.renderNodeBackgroundAndBorders(stack.element);
+        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);