Skip to content

Commit 04bdb48

Browse files
niklasvhniklasvh
committed
Fix layer ordering with multiple stacks on same auto z-index
1 parent 7e13231 commit 04bdb48

4 files changed

Lines changed: 91 additions & 8 deletions

File tree

‎dist/html2canvas.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1771,7 +1771,7 @@ NodeParser.prototype.isRootElement = function(container) {
17711771
};
17721772

17731773
NodeParser.prototype.sortStackingContexts = function(stack) {
1774-
stack.contexts.sort(zIndexSort);
1774+
stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
17751775
stack.contexts.forEach(this.sortStackingContexts, this);
17761776
};
17771777

@@ -2281,8 +2281,10 @@ function isTextNode(container) {
22812281
return container.node.nodeType === Node.TEXT_NODE;
22822282
}
22832283

2284-
function zIndexSort(a, b) {
2285-
return a.cssInt("zIndex") - b.cssInt("zIndex");
2284+
function zIndexSort(contexts) {
2285+
return function(a, b) {
2286+
return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
2287+
};
22862288
}
22872289

22882290
function hasOpacity(container) {

‎dist/html2canvas.min.js‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/nodeparser.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ NodeParser.prototype.isRootElement = function(container) {
200200
};
201201

202202
NodeParser.prototype.sortStackingContexts = function(stack) {
203-
stack.contexts.sort(zIndexSort);
203+
stack.contexts.sort(zIndexSort(stack.contexts.slice(0)));
204204
stack.contexts.forEach(this.sortStackingContexts, this);
205205
};
206206

@@ -710,8 +710,10 @@ function isTextNode(container) {
710710
return container.node.nodeType === Node.TEXT_NODE;
711711
}
712712

713-
function zIndexSort(a, b) {
714-
return a.cssInt("zIndex") - b.cssInt("zIndex");
713+
function zIndexSort(contexts) {
714+
return function(a, b) {
715+
return (a.cssInt("zIndex") + (contexts.indexOf(a) / contexts.length)) - (b.cssInt("zIndex") + (contexts.indexOf(b) / contexts.length));
716+
};
715717
}
716718

717719
function hasOpacity(container) {

‎tests/cases/zindex/z-index18.html‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head lang="en">
4+
<meta charset="UTF-8">
5+
<title>z-index18</title>
6+
<style>
7+
body {
8+
background: violet;
9+
}
10+
11+
#container {
12+
position: relative;
13+
height: 300px;
14+
}
15+
16+
.base {
17+
background: green;
18+
}
19+
20+
#container div {
21+
width: 800px;
22+
height: 300px;
23+
}
24+
25+
.div1 {
26+
background: red;
27+
}
28+
29+
#container .div2 {
30+
width: 400px;
31+
background: blue;
32+
}
33+
34+
#container .div3 {
35+
background: orange;
36+
width: 200px;
37+
height: 200px;
38+
}
39+
40+
#container .highlight1 {
41+
background: purple;
42+
height: 100px;
43+
}
44+
45+
#container .highlight2 {
46+
background: pink;
47+
height: 100px;
48+
}
49+
50+
#container .highlight3 {
51+
background: navy;
52+
height: 100px;
53+
}
54+
55+
#container .last {
56+
background: brown;
57+
width: 100px;
58+
height: 100px;
59+
}
60+
</style>
61+
<script type="text/javascript" src="../../test.js"></script>
62+
</head>
63+
<body>
64+
<div id="container" class="jqplot-target" style="position: relative; height: 300px;">
65+
<div class="base" style="position: absolute; left: 0px; top: 0px;">a</div>
66+
<div class="base" style="position: absolute; left: 0px; top: 0px;">b</div>
67+
<div class="jqplot-series-shadowdiv"style="position: absolute; left: 16px; top: 10px;">c</div>
68+
<div class="jqplot-series-shadowdiv" style="position: absolute; left: 16px; top: 10px;">d</div>
69+
<div class="jqplot-series-shadowdiv" style="position: absolute; left: 16px; top: 10px;">e</div>
70+
<div class="div1" style="position: absolute; left: 16px; top: 10px;">f</div>
71+
<div class="div2" style="position: absolute; left: 16px; top: 10px;">g</div>
72+
<div class="div3" style="position: absolute; left: 16px; top: 10px;">h</div>
73+
<div class="highlight1" style="position: absolute; right: 16px; top: 10px;">i</div>
74+
<div class="highlight2" style="position: absolute; left: 16px; top: 60px;">j</div>
75+
<div class="highlight3" style="position: absolute; left: 56px; top: 90px;">k</div>
76+
<div class="last" style="position: absolute; left: 16px; top: 10px;">l</div>
77+
</div>
78+
</body>
79+
</html>

0 commit comments

Comments
 (0)