Rietveld Code Review Tool
Help | Bug tracker | Discussion group | Source code

Unified Diff: include.postload.js

Issue 5852223410012160: Issue 1755 - Create overlays with correct positioning and z-index, considering all ancestors (Closed)
Patch Set: Created Jan. 7, 2015, 2:33 p.m.
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | no next file » | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: include.postload.js
===================================================================
--- a/include.postload.js
+++ b/include.postload.js
@@ -251,26 +251,42 @@
// Adds an overlay to an element, which is probably a Flash object
function addElementOverlay(elt) {
- // If the element isn't rendered (since its or one of its ancestor's
- // "display" property is "none"), the overlay wouldn't match the element.
- if (!elt.offsetParent)
- return;
+ var zIndex = null;
+ var position = "absolute";
- var thisStyle = getComputedStyle(elt, null);
+ for (var e = elt; e; e = e.parentElement)
+ {
+ var style = getComputedStyle(e);
+
+ // If the element isn't rendered (since its or one of its ancestor's
+ // "display" property is "none"), the overlay wouldn't match the element.
+ if (style.display == "none")
+ return null;
+
+ // If the element or one of its ancestors uses fixed postioning, the overlay
+ // has to use fixed postioning too. Otherwise it might not match the element.
+ if (style.position == "fixed")
+ position = "fixed";
+
+ // Determine the effective z-index, which is the highest z-index used
+ // by the element and its offset ancestors. When using a lower z-index
+ // the element would cover the overlay. When using a higher z-index the
+ // overlay might also cover other elements.
+ if (style.position != "static" && style.zIndex != "auto")
+ zIndex = Math.max(zIndex, parseInt(style.zIndex, 10));
kzar 2015/01/13 11:13:13 zIndex is initially null which when passed to Math
Sebastian Noack 2015/01/13 13:20:09 I didn't realize that null is converted to 0, but
+ }
+
var overlay = document.createElement('div');
overlay.prisoner = elt;
overlay.className = "__adblockplus__overlay";
- overlay.setAttribute('style', 'opacity:0.4; display:inline-box; position:absolute; overflow:hidden; box-sizing:border-box;');
+ overlay.setAttribute('style', 'opacity:0.4; display:inline-box; overflow:hidden; box-sizing:border-box;');
var pos = getAbsolutePosition(elt);
overlay.style.width = elt.offsetWidth + "px";
overlay.style.height = elt.offsetHeight + "px";
overlay.style.left = pos[0] + "px";
overlay.style.top = pos[1] + "px";
-
- if (thisStyle.position != "static")
- overlay.style.zIndex = thisStyle.zIndex;
- else
- overlay.style.zIndex = getComputedStyle(elt.offsetParent).zIndex;
+ overlay.style.position = position;
+ overlay.style.zIndex = zIndex || "auto";
kzar 2015/01/13 11:13:13 Should possibly check that zIndex is null here ins
Sebastian Noack 2015/01/13 13:20:09 I use "auto" as default value above now.
// elt.parentNode.appendChild(overlay, elt);
document.body.appendChild(overlay);
« no previous file with comments | « no previous file | no next file » | no next file with comments »

Powered by Google App Engine
This is Rietveld