Forked from tlrobinson/visualize-stacking-contexts.js
Created
October 27, 2020 03:06
-
-
Save sgardn/832b364a0f4b1a687480d0d5a8abd30d to your computer and use it in GitHub Desktop.
Some console output to help you visualise stacking contexts on a page (no jquery)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Usage: | |
* Paste this into your dev tools console (or even better as a snippet) | |
* It will parse the page and find all the things that create a new stacking context | |
and dump some info about them to the console. It will also outline them on the page. | |
* This is pretty rough and probably misses heaps of bugs and edge cases. | |
*/ | |
function highlight(el) { | |
el.style.outline = '3px solid red'; | |
} | |
function css(el, property) { | |
return window.getComputedStyle(el)[property]; | |
} | |
function log(el) { | |
console.group('New Stacking context'); | |
console.log(el); | |
console.log('z-index: ', css(el, 'z-index') ); | |
console.log('position: ', css(el, 'position')); | |
console.log('opacity:', css(el, 'opacity')); | |
console.log('transform:', css(el, 'transform')); | |
console.log('filter:', css(el, 'filter')); | |
console.groupEnd(); | |
} | |
Array.from(document.querySelectorAll("*")).forEach(function(el){ | |
var zindex = css(el, 'z-index'); | |
var position = css(el, 'position'); | |
var opacity = parseFloat(css(el, 'opacity')); | |
var transform = css(el, 'transform'); | |
var filter = css(el, 'filter'); | |
// Tests | |
// z-index !== auto, position != static | |
if ((zindex !== "auto") && (position !== "static")) { | |
highlight(el); | |
log(el); | |
} | |
// opacity < 1 | |
if (opacity < 1) { | |
highlight(el); | |
log(el); | |
} | |
// position == sticky|fixed (on some chromes) | |
if (position == "fixed" || position == "sticky") { | |
highlight(el); | |
log(el); | |
} | |
// css transform | |
// TODO: account for vendor prefixes? | |
if (transform !== "none") { | |
highlight(el); | |
log(el); | |
} | |
// css filter | |
// TODO: account for vendor prefixes? | |
if (filter !== "none") { | |
highlight(el); | |
log(el); | |
} | |
}) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment