Polypane 26: Accurate device emulation with safe area and small viewport units

Polypane 26 brings the most accurate device emulation available anywhere. We now emulate small viewport units (svh) and device-specific safe area insets, two critical factors that affect every mobile layout but were impossible to emulate until now. This means layout bugs that previously only surfaced on real devices can now be caught and fixed fast during development.

And there's plenty more. Let's dig in.

What's Polypane? Polypane is the browser for web developers who care about their craft and their users. It's a Chromium-based stand-alone browser for Mac, Windows and Linux that shows sites in multiple synced panes and helps you make your site more responsive, more accessible and faster.

Safe area and small viewport emulation

Polypane 26 adds two new emulation features that make our device emulation more accurate than anything else available: safe area inset emulation and small viewport emulation.

These new emulations are possible due to features we collaborated on with Igalia, who we hired to implement them in Chromium. Thanks Max and Maksim!

Today, we're excited to make them available to all Polypane users.

Safe area inset emulation

Safe area insets mark the parts of your page that sit behind notches, action bars, camera holes and system UI. Until now you needed an actual device to see these in action, but now you can test them right inside Polypane.

Every device profile in Polypane includes accurate insets so you can make sure that no text or UI is hidden or impossible to interact with.

body {
  padding-top: env(safe-area-inset-top);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
}

Small viewport emulation

On mobile, browser UI (like the address bar) can cover part of the viewport until you scroll. So the visible space is smaller than the full viewport height.

The svh unit represents the actual visible space when mobile browser UI is present. This difference can break layouts that rely on viewport units (like full height overlays), but was previously not testable in any browser developer tools.

Polypane now emulates svh on all mobile and tablet devices, so the layouts you build will work as expected on real devices.

.visible-height {
  height: 100svh;
}

Visualizations

We've added visualizations to help you see the safe area insets and the small viewport height while you work. Toggle them in a pane's Device Emulation settings.

Insets appear as blue bands at the edges. The difference between svh and the full viewport is a pink strip at the bottom that slides away on scroll like mobile browser UIs.

All new devices

To support these new features we rebuilt our device database from the ground up. We also took the opportunity to clean up some of the older devices and to add new ones, like the iPhone 16e, iPhone 17, 17 Pro, 17 Air and 17 Pro Max, along with new Pixel and Galaxy devices.

Our community contributed precise measurements for dozens of Android devices from flagship devices to budget phones. This diversity in devices help you develop for the real world, where not everyone has the newest device.

In no particular order we would like to profusely thank Peter, Jules, Declan, Markus, Floris, James, Julian, Jeroen, Kari, Kriszti, Tim, Alex, Greg, Sara, Ryan, Pontus, Jan and Christian! 🙇‍♂️🙇‍♂️🙇‍♂️

If you own a device not yet available in Polypane and want to see it added, please let us know and you can help us add it!

New workspaces

We updated our Device lab, iOS and Android built-in workspaces to use the latest devices.

We've also refreshed our "most used sizes worldwide" workspace to reflect the latest data from StatCounter.

One notable shift: 1920 by 1080 has overtaken mobile devices. Note though that even that accounts for just 7.5% of visitors, so the real world variety in screen sizes is still huge. The ideal viewport doesn't exist so make sure to test with a wide variety of sizes!

Multiple measurement overlays

We added a Measure overlay in Polypane 24.1. In 26 you can add multiple measurement overlays.

Add new measurements with a click and drag, and each measurement can be moved and resized independently.

Hover over a measurement rectangle to show its distance to the edges, any guides you have and to all other measurements. perfect for making sure everything is perfectly aligned.

The screenshot functionality is also still there: the currently selected measurement rectangle is the one that's used when you make a "measured" screenshot.

New confirmation system

One of Polypane's 'sharp edges' has always been that destructive actions like applied breakpoints or workspaces happen instantly. Great for experienced users, but not so nice for people still getting used to the app. Causing users to lose work is generally not a good thing.

We've added a new confirmation system that helps prevent destructive actions from happening by accident. When you do something that is potentially destructive, a confirmation popup explains what will happen and asks you to confirm.

When you get more familiar with the app, you can choose to not show the confirmation again for specific actions so they happen instantly again. (You can always reset all confirmations in the settings).

We hope this takes away some of the sharp edges and makes Polypane easier to pick up for new users.

Elements panel improvements

The elements panel has some noticable improvements that will make it easier and more reliable.

Toggling element visibility shortcut

You can now press ⌘ h to toggle the visibility of the currently selected element in the Elements panel. Others browsers use h for this but that shortcut is already taken in Polypane to switch to the horizontal layout.

The shortcut is only active when the elements panel is opened, and you can also toggle the visibility by clicking the eye icon next to the element in the Elements panel. Thanks Harald for the suggestion!

Performance

Site builders like Bricks for WordPress have started to lean heavily on CSS custom properties, stuffing them all on the :root selector. Because those are set for all descendants, the Styles tab in both the Chromium Devtools and in the Polypane Elements panel have started to struggle. Sites sometimes have hundreds or thousands of untyped CSS variables which take a long time to parse, typecast and render controls for.

We've improved the performance of the Styles in the Elements panel significantly so they're less affected by this type of CSS organisation, making the Elements panel much more responsive even when it has to create controls for a lot of CSS variables.

Parsing improvements

The elements panel now shows :host styles in the styles tab, thanks to a report from Murat. This should've been in already, but dealing with CSS that goes across shadow DOM boundaries is very tricky. It's supported now though!

There's also been improvements to the CSS parsing logic: the breakpoints feature now correctly detects nested media query breakpoints (Thanks Erik!) and we fixed a a bug in how we parsed ranged media queries. We've also added new CSS properties and values for our autocomplete and improved support for sites making extensive use of @import rules (Thanks Nathan!).

Outline panel improvements

We made three small improvements to the outline panel.

Split out suggestions

For the header and landmark outlines we now have a separate section for page-wide suggestions. This makes it cleared to see what the structure of the current page is (and the suggested improvements for the existing elements) and what suggestions Polypane has for the page as a whole.

Ignore devtoolbars

Some frameworks like Astro and Nuxt add a devtoolbar to the page when in development mode. These toolbars are really useful when developing but have headings and landmarks that pollute the outline view.

We've added logic to ignore these toolbars so they don't affect the page outline as you work. If you know of other toolbars that should be ignored, please let us know!

Clarification for 'label'

An unfortunate fact on the web is that most words have multiple meanings depending on the context. The word "label" is a good example of this: It can mean the <label> element, but it can also mean the accessible name an element is labeled with.

In our Form outline we used the term "label" to refer to the latter, which caused some confusion. The word "label" now has a tooltip to explain what definition of the term we're using. Thanks Eric for flagging this!

Extension improvements

We noticed that many new users approach Polypane as a regular browser: they immediately load it up with extensions before exploring what Polypane has to offer.

While we work hard to make sure that Polypane works with most extensions, many of the features people use extensions for are built right into Polypane where they're more integrated, faster and more secure. We don't want people to miss out on these features!

When you now install extensions that provide features that Polypane already has, we show a suggestion in the confirmation popup to let you know where to find the built-in alternative. This way you can decide to use the built-in feature instead of the extension, and keep your browser lean and fast.

Extension suggestions

Along with that, the extension manager now shows a couple of suggested extensions that work well with Polypane and have proven to be popular with our users: VisBug, 1Password, React Devtools and Vuejs devtools.

We've also added additional information to the extension manager for when an extension doesn't do what you expect or if we know there is no support (for example, extensions that make use of the Sidepanel API).

Session visibility

Polypane's session tooling is a powerful way to test your site with different states, users etc. Sessions can be set per tab or per pane. For panes with an active session, you can now display the session name above the pane so you can see what session is running without having to hover over the session icon.

To turn this on or off, check "Show Session Name in Title" in the Session section of the pane settings. Thanks Kiran for the suggestion!

Showing multiple URLs side by side

You can now turn off navigation sync for all panes in a tab at once. Right-click the sync button in the address bar and uncheck "Navigation" to turn off navigation sync for all panes in that tab. This can be useful when you need to temporarily deal with login logic or other per-pane navigation differences. Thanks Kiran for the suggestion!

If you have a pane with navigation sync off, that will be preserved as you toggle navigation sync for the entire tab.

Scroll sync improvements

Scroll sync now runs at a higher framerate, making it feel much smoother and more in sync even with many panes showing.

Color picker improvements

You can now right-click the swatchs in our color picker to copy the color combination as CSS or as CSS variables.

New in-app chat provider

The chat provider we used in the app since launch, Drifft, has been offline for the better part of the summer with zero communication. Apologies to anyone who tried to reach out to us through the in-app chat and got error messages.

Thought it appears to be back online at this moment, it's clear that it's no longer a trustworthy service. That's why we switched our in-app chat to Crisp, which we've used for our website chat for a while now. Nothing really changes, except that the in-app chat now works again!

Chromium 140

Polypane 24 is built on Chromium 140. For all the experimental features enabled in this release, check out the experimental web platform features overview.

Get Polypane 26

Polypane is available for Windows, Mac and Linux in 64 bit and ARM versions.

Polypane automatically updates on Mac, Windows and on Linux when using the AppImage. Otherwise, go to the download page to download the latest version!

Don't have Polypane yet? There is a 14 day trial available.
Try it for free. No credit card needed.

Polypane 26 Changelog

New

• New Small viewport emulation
• New Safe area emulation
• New New iPhone and Android devices (thank Peter, Jules, Declan, Markus, Floris, James, Julian, Jeroen, Kari, Kriszti, Tim, Alex, Greg, Sara, Ryan, Pontus, Jan and Christian!)
• New Add multiple measurement overlays at once
• New Chromium 140

Improvements

• Improved Elements panel: Support inlining import rules (Thanks Nathan!)
• Improved Elements panel: Updated CSS property and value suggestions
• Improved Elements panel: Styles update after pane resize (Thanks Bob!)
• Improved Elements panel: New attributes are recognised as idrefs
• Improved Elements panel: cmd + h toggles visibility of selected element (Thanks Harald!)
• Improved Elements panel: Performance improvements for large CSS files
• Improved Elements panel: hidden elements are now more desaturated
• Improved Elements panel: Improve rendering of style panel for Bricks based sites
• Improved Elements panel: inspect and edit :host styling (Thanks Murat!)
• Improved Outline panel: Suggestions for landmarks and headers have a separate section now
• Improved Outline panel: Astro and Nuxt devtoolbars are now ignored for outlines
• Improved Outline panel: Clarification for the term 'label' (Thanks Eric!)
• Improved Extensions: Show suggested extensions in the extension panel
• Improved Extensions: Show suggestions for extensions that have built-in alternatives
• Improved Workspaces: new device lab, iOS and Android workspaces
• Improved Workspaces: updated worldwide most used sizes workspace
• Improved Permissions: Better handling of permissions on file protocol
• Improved Sessions: option to show session name abovs panes (Thanks Kiran!)
• Improved Tabs: new context menu option to reopen closed tab
• Improved Screenshots: Always hide scrollbar when taking screenshots
• Improved Navigation: You can now turn off navigation sync for an entire tab at once (Thanks Kiran!)
• Improved Scroll sync now runs at higher framerates
• Improved Color picker: export color and background combination as CSS
• Improved Layout switcher: links to workspaces (Thanks David!)
• Improved App-wide confirmation system to prevent destructive actions (Thanks David!)
• Improved Cache disabling logic now handles more cases
• Improved Switch to new Chat support provider Crisp
• Improved Better logic for overflow detection (Thanks Emma!)
• Improved updated list of Google fonts

Fixes

• Fix Elements panel: Prevent elements panel crash for certain HTML structures (Thanks Pandu!)
• Fix Reference image: Top offset on reference image cuts off by viewport (Thanks Niels!)
• Fix Rulers: issue where you couldn't add guides in full layout with measure overlay visible
• Fix Breakpoints: Fix detection logic for media query ranges
• Fix Breakpoints: Correctly detect all nested breakpoints (Thanks Erik!)
• Fix Color picker: Colors on Wayland were always fully transparent (Thanks Philipp!)
• Fix Outline panel: Deal with HTML element height affecting outline detection (Thanks Eric!)
• Fix Focus sync didn't work in some cases
• Fix Context menu: 'autofill form' is now shown on all form descendants
• Fix Issue where bulk screenshots sometimes wouldn't be saved