Fix layer ordering with multiple stacks on same auto z-index

lewnelson · Oct 19, 2014 · 04bdb48 · 04bdb48
1 parent 7e13231
commit 04bdb48
Show file tree

Hide file tree

Showing 4 changed files with 91 additions and 8 deletions.
diff --git a/dist/html2canvas.js b/dist/html2canvas.js
@@ -1771,7 +1771,7 @@ NodeParser.prototype.isRootElement = function(container) {
 };
 
 NodeParser.prototype.sortStackingContexts = function(stack) {
-    stack.contexts.sort(zIndexSort);
+    stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
     stack.contexts.forEach(this.sortStackingContexts, this);
 };
 
@@ -2281,8 +2281,10 @@ function isTextNode(container) {
     return container.node.nodeType === Node.TEXT_NODE;
 }
 
-function zIndexSort(a, b) {
-    return a.cssInt("zIndex") - b.cssInt("zIndex");
+function zIndexSort(contexts) {
+    return function(a, b) {
+        return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
+    };
 }
 
 function hasOpacity(container) {

diff --git a/dist/html2canvas.min.js b/dist/html2canvas.min.js
diff --git a/src/nodeparser.js b/src/nodeparser.js
@@ -200,7 +200,7 @@ NodeParser.prototype.isRootElement = function(container) {
 };
 
 NodeParser.prototype.sortStackingContexts = function(stack) {
-    stack.contexts.sort(zIndexSort);
+    stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
     stack.contexts.forEach(this.sortStackingContexts, this);
 };
 
@@ -710,8 +710,10 @@ function isTextNode(container) {
     return container.node.nodeType === Node.TEXT_NODE;
 }
 
-function zIndexSort(a, b) {
-    return a.cssInt("zIndex") - b.cssInt("zIndex");
+function zIndexSort(contexts) {
+    return function(a, b) {
+        return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
+    };
 }
 
 function hasOpacity(container) {

diff --git a/tests/cases/zindex/z-index18.html b/tests/cases/zindex/z-index18.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>z-index18</title>
+    <style>
+        body {
+            background: violet;
+        }
+
+        #container {
+            position: relative;
+            height: 300px;
+        }
+
+        .base {
+            background: green;
+        }
+
+        #container div {
+            width: 800px;
+            height: 300px;
+        }
+
+        .div1 {
+            background: red;
+        }
+
+        #container .div2 {
+            width: 400px;
+            background: blue;
+        }
+
+        #container .div3 {
+            background: orange;
+            width: 200px;
+            height: 200px;
+        }
+
+        #container .highlight1 {
+            background: purple;
+            height: 100px;
+        }
+
+        #container .highlight2 {
+            background: pink;
+            height: 100px;
+        }
+
+        #container .highlight3 {
+            background: navy;
+            height: 100px;
+        }
+
+        #container .last {
+            background: brown;
+            width: 100px;
+            height: 100px;
+        }
+    </style>
+    <script type="text/javascript" src="../../test.js"></script>
+</head>
+<body>
+<div id="container" class="jqplot-target" style="position: relative; height: 300px;">
+    <div class="base" style="position: absolute; left: 0px; top: 0px;">a</div>
+    <div class="base" style="position: absolute; left: 0px; top: 0px;">b</div>
+    <div class="jqplot-series-shadowdiv"style="position: absolute; left: 16px; top: 10px;">c</div>
+    <div class="jqplot-series-shadowdiv" style="position: absolute; left: 16px; top: 10px;">d</div>
+    <div class="jqplot-series-shadowdiv" style="position: absolute; left: 16px; top: 10px;">e</div>
+    <div class="div1" style="position: absolute; left: 16px; top: 10px;">f</div>
+    <div class="div2" style="position: absolute; left: 16px; top: 10px;">g</div>
+    <div class="div3" style="position: absolute; left: 16px; top: 10px;">h</div>
+    <div class="highlight1" style="position: absolute; right: 16px; top: 10px;">i</div>
+    <div class="highlight2" style="position: absolute; left: 16px; top: 60px;">j</div>
+    <div class="highlight3" style="position: absolute; left: 56px; top: 90px;">k</div>
+    <div class="last" style="position: absolute; left: 16px; top: 10px;">l</div>
+</div>
+</body>
+</html>