Website issues you could encounter
By loading pages in multiple panes at the same time, issues in your site are enlarged or exposed that are not as noticable in regular single-pane browsers.
This can catch people off guard, thinking Polypane is not working correctly when it is just exposing something not working well on the page.
Here are some common issues that become more noticable in Polypane.
Polypane runs the same code in each pane so performance bottlenecks are quicker to show.
Roughly put, Polypane needs the same amount of resources for each pane as Chrome needs for a single tab. It's essentially rendering multiple full Chrome tabs at the same time, with the CPU and memory requirements that brings.
This means that while your site might perform well on your fast computer in a single tab, when that same code is executed 3, 4 or 5 times, bottlenecks start to appear.
Those bottlenecks were always there, Polypane just enlarges them. They will also be there when a user has other resource intensive tabs open (like playing a video on Youtube) or has your page open on a less powerful device than yours.
There are ways to improve performance in Polypane, check out the Performance docs for tips on optimizations you can do.
Rate limited API's
Each pane in Polypane requests its own resources, so you download them for each pane separately. A rate limited api thus reaches that limit faster the more panes you have.
This is essential for emulation, where your server might send different resources depending on the user agent and other properties.
But if your server limits the number of calls you can make, or you have a rate-limited API you use, Polypane will reach that limit faster the more panes you use.
If you depend on an API with rate limiting for your development work we highly recommend you replace it with a mock server, caching proxy or disable it. The last thing you as a developer need it to worry about how often you get to reload your page before the API stops working.
If your site logs you out on every refresh, Polypane can unexpectedly log you out when it needs to sync up the navigation state between panes.
Sessions, user interactions and navigation are all synced between panes. This means that when you're logged in anywhere, you're logged in everywhere. It makes sure that panes all get the time needed to navigate on their own as a result of a synced user interaction so syncing happens naturally.
However as a last resort, it updates the URL of panes that have not navigated yet. If this subsequently triggers a log out event, that will then get synced to all other panes as well.
Not syncing between panes
The most common reason for input not syncing between panes is that you're not using the same elements across sizes.
You can prevent this by using the basics of good web development. Polypane syncs events on the same elements across panes. If those elements aren't available, no syncing is possible. This happens when you have different components on a mobile device and a larger screen, for example.
Rather than building and maintaining two sets of components, it's better to build one set of components and use media queries to style them appropriately for the viewport size.
Pages might look fine in Polypane but are zoomed out on actual mobile phones. This is because Polypane by default will use "desktop" rendering. You can use the emulation options to toggle to mobile rendering.
Desktop rendering is faster and will make your site look responsive even if you don't set the right
viewport meta tag.
Mobile phones however, have to support the entire internet, including sites that were never optimized for mobile devices in the first place. So when a viewport tag with the right value is not available, It will pretend it's much wider and then zoom out the site to fit.
When you're missing a viewport tag, mobile devices will think you didn't make a responsive website, and render it differently.
Tldr: Stick to our responsive design ground rules to not be surprised when testing on actual devices.
Non standard navigation
If you use non standard navigation, Polypane has no way of knowing it should sync anything between panes.
Polypane can accurately sync regular HTTP navigation like GETs, redirect and POSTs as well as the History API.
This means that any routing solution that uses the History API (React router, Gatsby, Next, Vue router, Reach router, Angular router, etc) works really well in Polypane. In fact this website is built using Gatsby and it's built-in routing.
When you do not use the browser-supported navigation methods however, Polypane can only depend on input syncing to maintain the state between panes. Equally as important, assistive technologies will also have a tough time keeping your visitor informed of where they are.
We highly recommend you use a modern and battle tested routing solution, as it will massively improve the user experience.
Third party syncing issues
Tools like Browser-sync or Ghostery leads to a janky experience in Polypane because Polypane syncs faster than those tools.
Polypane already syncs scrolling, navigation and events. Polypane does this in-process, but tools like Browser-sync and Ghostery use a local webserver. This makes them (slightly) slower than Polypane.
Because of that these tools can actually reset your scrolling: they're still syncing state from a moment ago when Polypane has already synced the next scroll event, so they cause your site to "scroll back". It's a situation where milliseconds matter and the extra roundtrip to a server are enough to get the wires crossed.
When you use these tools, turn their syncing features off. For Browser-sync, it's called "ghost mode".
Is your question not answered?
Ask via Twitter, Slack or our contact form