On mobile a common UI element is to a have “Pull to refresh” control above a scrollable list. This area then contains last updated information or similar.

The desired effect, where you drag down to reveal some content.

However, if you try to do this naively in HTML, by positioning an element outside the <body> using position or negative margins, you’ll find the element will not render. This is true for all browsers.

But: You can work around this using the transform property. By specifying a translate value, this will move the element outside the body while keeping it visible. The markup is relatively simple:

<div role="presentation" class="easter-egg">
    Here be dragons...
    <span role="img" style="font-size: 2em; top: 0.15em; position: relative;">
        🐲
    </span>
</div>

<style>
.easter-egg {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    color: black;
    text-align: center;
    z-index: 1000;
    transform: translate3d(0, -60px, 0);
}
</style>

You can try this effect on this page scroll to the top and keep scrolling up (on OSX, Android or iOS) and you will see the element. It will only work on OSX with a trackpad, not using a mouse wheel.

This is a very simple trick that I did not find documented anywhere, delight your users and put something fun for them to discover up top! :)