Stackray

Lift any web page into a 3D stack of its layers. See stacking contexts, z-index, clipping and invisible overlays.

Stackray lifts the page you are looking at into a 3D stack of its layers, inside a small retro-Mac window on top of the tab. It shows what the browser sees: stacking contexts, z-index, clipping and the invisible overlays sitting on top of everything. Click the toolbar icon or press Alt+Shift+S (Option+Shift+S on a Mac). The page shrinks into the window and its layers spread out in depth, ordered by the browser's computed paint order. Press Esc to put the page back. What you can do: - Orbit, pan and zoom the stack. Hover a layer for its tooltip, click to select it, double-click to return to the page with that element outlined. - Switch color modes with 1 to 5: depth, stacking contexts, z-index heat, problems and plain. Each mode has a legend. - Problems mode marks the usual suspects in red: elements trapped in a stacking context, so a bigger z-index does nothing, and invisible elements that may be catching your clicks. Elements cut off by an overflow: hidden ancestor get a red dashed edge. - T gives leaf layers their own pixels from a screenshot of the page. - S arranges the layers as a staircase in paint order. - L opens the z-index ladder, the elements competing directly under the root stacking context. - / searches the layer tree. ? lists every shortcut. Privacy: Stackray makes no network requests and has no account, analytics or telemetry. It only runs on a tab when you open it there. The snapshot and screenshots stay in memory in that tab and are dropped when you close it. Policy: https://github.com/vedas-dixit/Stackray/blob/main/PRIVACY.md Stackray is open source under the MIT license: https://github.com/vedas-dixit/Stackray This is an early release. Textured mode covers the first six screens of a long page; layers further down stay plain. Bug reports with the page URL are welcome on GitHub.