Skip to contentSkip to footer

Synced interactions

Polypane syncs interactions between all panes. You can manage which interactions are synced by right-clicking the sync button in the address bar.

By default Polypane syncs the following user interactions and events: scroll, hover, click, keypress, input, change. It can also sync focus across panes.

Scroll syncing

The scroll position in panes is synced automatically, and you can toggle it on and off using the button in the address bar or by pressing cmd/ctrl o.

By default scroll syncing works on the page viewport (which is the same as the html element) but some websites set the height of the html and the body elements to 100%, making the body element the scroll container.

Though we recommend that you don't do that, scroll syncing will automatically switch over to sync the position of the body element.

Scroll syncing is disabled when BrowserSync is detected

Browsersync also syncs the scroll position but because it's slightly slower than Polypane's scroll syncing, it continuously resets the scroll to a previous position, leading to a very frustrating experience.

Polypane will disable its scroll syncing when it detects Browsersync with "ghost mode" active to prevent this poor behavior. We recommend you migrate to using Polypane's built-in tools or turn off ghostMode in Browsersync and let Polypane handle all the event synchronisation.

Polypane will show a popup notifying you about this for every page that it detects browsersync on.

Mouse interactions

Hover and click interactions are synchronised between panes. This means you will see the hover effect in each pane, and click interactions that trigger focus or open a menu are applied everywhere.

The hover synchronisation can not fully simulate a mouse hover, so there are rules that are not applied: CSS rules that change child or pseudo elements of hovered elements are currently not applied, and so won't be shown.

Mouse clicks are fully simulated. Website code that checks whether a mouse click is synthetic will possibly not be executed.

Form submissions are prevented

When a mouse click event (or keyboard event) triggers a form submit action it is not synced across panes, so POST calls are only sent once. Note that if you use JavaScript without also using the appropriate form semantics, we can not detect this.

Keyboard interactions

We sync both input event and key presses, so that form interactions and any shortcuts you may have on a page will be triggered in all panes.

Form filling

Interacting with forms is synced between panes. Anything typed into an input or textarea or any selection made in a select, radio or checkbox is automatically applied in the other panes too. Check out our form autofilling feature to fill forms even more efficiently.

Focus

Usually only a single element can have focus at any one time. By turning on Focus sync, the focus status in each pane is preserved. This lets you test out focus styling across all panes in one go.

Navigation is synced between all panes as a last measure when input syncing doesn't result in the same URL in all panes (for example, because the mobile size uses a different navigation than the desktop size).

Navigation sync can be turned off in the emulation settings of a pane for that specific pane, letting you decouple that pane from the rest. You can use this to compare your local site with the live site, or compare two different sites side-by-side.

Polypane Message Bus

For events that aren't synced out of the box by Polypane, you can use the Polypane Message Bus.

PP

Have a question about Polypane?

Contact us any time though chat, Slack or our contact form:

Contact Support

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot