Last active
February 7, 2021 08:04
-
-
Save eoinkelly/c5ecf23145567aa87edd to your computer and use it in GitHub Desktop.
Some console output to help you visualise stacking contexts on a page
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. | |
*/ | |
// TODO: remove the jquery dependency (or inject it onto page) | |
function highlight($el) { | |
$el.css('outline', '3px solid red'); | |
} | |
function log($el) { | |
console.group('New Stacking context'); | |
console.log($el[0]); | |
console.log('z-index: ', $el.css('z-index') ); | |
console.log('position: ', $el.css('position')); | |
console.log('opacity:', $el.css('opacity')); | |
console.log('transform:', $el.css('transform')); | |
console.log('filter:', $el.css('filter')); | |
console.groupEnd(); | |
} | |
$('*').filter(function(){ | |
var $el = $(this); | |
var zindex = $el.css('z-index'); | |
var position = $el.css('position'); | |
var opacity = parseFloat($el.css('opacity')); | |
var transform = $el.css('transform'); | |
var filter = $el.css('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
FYI I removed the jQuery dependency in this fork: https://gist.github.com/tlrobinson/17cd4fee64afb1f60450bec621604de7
Neat tool, thanks!