The Cartographer's First Un-scaled Chart: On the Precise Placement of a Perfectly Anchored Pop-Up

In 1569, Gerardus Mercator unveiled his revolutionary world map, a projection that would forever change navigation. His genius lay in rendering the globe’s spherical surface onto a flat plane with straight, consistent lines of bearing. A sailor could draw a straight line from Lisbon to the Caribbean and know it represented a true compass direction. It was a triumph of abstraction, of sacrificing one form of accuracy—the true size of landmasses—to achieve another: reliable, predictable course-plotting.

We perform a similar act of cartographic abstraction every time we place a tooltip, a modal, or a menu on a web page. Our Mercator projection is the CSS property `position: fixed`. We declare an element’s placement relative to the viewport window, believing we have anchored it to a fixed point in the user’s universe. Like Mercator’s sailors, we trust that this element will remain steadfast as the user scrolls the vast sea of content beneath it.

But Mercator never had to account for a virtual keyboard suddenly rising up from the bottom of the viewport like a rogue wave. He never had to contend with a dynamic browser toolbar collapsing on scroll, abruptly rescaling the very viewport his chart was anchored to. This is where our modern cartography fails. Our `fixed` element, so precisely placed, suddenly appears half-obscured or, worse, completely detached from the context it was meant to describe. It becomes a landmark adrift.

The recent shift in mobile browsers, particularly Safari’s evolving viewport units, is our age’s discovery that the world is not a perfect cylinder. It is an irregular, dynamic sphere. Our old maps are no longer sufficient. The solution, much like the corrections applied by later cartographers, lies in a more dynamic and contextual understanding of our canvas. We must move from the rigid certainty of `fixed` to the adaptive intelligence of the `@viewport` CSS rules or the JavaScript Visual Viewport API.

These tools allow us to sense the environment, to understand that the ‘safe area’ for our pop-up is not the static height of a screen, but the ever-shifting space between a receding URL bar and an emerging keyboard. It asks us to design not for a single, idealised viewport, but for the fluid reality of how the viewport actually behaves. Our pop-ups must become less like fixed stars on a paper chart and more like buoys, adjusting their moorings to stay in the correct position relative to the moving waterline. It is a humbler, more complex form of craftsmanship, but it is the only way to ensure our carefully drawn interfaces remain useful and stable, no matter which way the winds of user interaction blow.

Notes & further reading

A few pages I came back to while writing this: