A few bugs I ran into while using Kinopio on an iPad Pro

Hello folks :wave:t4:

I’ve been using Kinopio over the past week to collect visual inspiration, develop writing ideas, and manage a small personal project. It’s been an absolute blast! This app works exactly like my brain does, which makes me want to open it and use it every day.

@pirijan, thanks a bunch for creating this lovely tool!

I’m using Kinopio on my MacBook, iPhone, and iPad. It works perfectly on the MacBook and iPhone, but the experience on the iPad is quite janky — no doubt because of the peculiarities of Safari on iPadOS. It’s not bad enough to be unusable, but it does make me want to reach for my MacBook whenever I have it at hand.

In this post, I’ve tried to catalog some of the bugs I’ve noticed while using Kinopio on my 11-inch iPad Pro (M2, 2022) with and without a Magic Keyboard attached. I hope this will be helpful.

1. Ctrl + Enter triggers the iPadOS right click menu.

This seems to be a system-wide behavior. Ctrl + Enter on iPadOS is mapped to right click across all apps, with no way to remap it or turn it off. This means I can’t insert a newline in a card unless I write the text in another app and then copy it into Kinopio.

2. When not connected to the a keyboard, the process of adding a GIF/image to a card makes the screen jump around wildly

This is best demonstrated by a screen recording: Uploading an image to Kinopio on iPad Pro - YouTube

The issue here might be the soft keyboard appearing and disappearing several times as focus moves from the card’s text area → nothing → the search field in the image upload box.

The constant layout shifts sometimes break the layout of the image upload box itself, which I wasn’t able to trigger in this video. When that happens, the element containing the images/GIFs becomes far too small and I’m only able to see the top row of images in the search results. If I aim my finger carefully, I can still scroll within that tiny tiny area, but it’s not ideal.

3. The zoom control at the bottom right of the page disappears when I touch the screen with my finger

I suppose I’m hitting a code path meant to hide the zoom control on touch devices, where you can simply use pinch gestures to change zoom level. But since the iPad is a hybrid device, it would be useful to have the zoom control be visible for the times when I’m using it with the trackpad on the Magic Keyboard.

4. Trying to zoom out to less than 100% triggers Safari’s tab overview

I can only zoom into a page using pinch gestures when I’m using the iPad. When I try to zoom out, Kinopio will correctly zoom out until the level reaches 100%. Then, it will seemingly ignore the gesture and let Safari handle it, at which point Safari will show me an overview of all my open tabs.

Another screen recording: Zooming in and out in Kinopio on iPad Pro - YouTube

If I try to control zoom using Cmd + Plus or Cmd + Minus, I just trigger the browser zoom instead of Kinopio’s zoom. This changes the size of all UI elements, which is not what I want.

5. The zoom and board overview controls at the bottom right of the page move upwards by a random amount after I touch the page with my finger

I’m guessing this is meant to make space for Safari’s bottom bar on the iPhone. The iPad version of Safari has its UI controls at the top of the screen, so this isn’t really needed.

6. Zooming and panning around a board makes all the UI controls jitter up and down as they try to stay in place

You can see this happening in the two videos I uploaded above.

I understand a lot of these issues are down to how bizarre Safari can sometimes be. As a frontend developer myself, I’ve spent my fair share of time fixing issues that only appear in Safari and nowhere else. I also understand these might not be the highest priority issues, since I doubt too many people are using Kinopio on iPads. Still, it would be great to see them fixed at some point in the future :slight_smile:

Despite the issues, I enjoy using Kinopio on iPad and will continue to do so. The combination of touch and keyboard input is hard to beat.

Once again, thanks for creating this lovely tool and this welcoming community around it! I just subscribed a few hours ago, and I can’t wait to see what I can use it for.

2 Likes

Hey s3thi,

Thanks for writing in and your detailed feedback I agree with all of it :slight_smile:

The fix for all these ipad (and also iphone keyboard/zoom issues) is to implement my own zoom/scroll system for touch because iOS just doesn’t provide the events or overrides required to make it non-janky. The zoom system is one of the next big things I want to do for next month, but there’s a couple pre-requisite features and performance improvements I need to make first.

Here’s an old and experimental branch that has better zoom (but introduces a couple other problems). You might find it more workable in the meantime though:

https://deploy-preview-305--kinopio-client.netlify.app/hello-kinopio-Y1X79OS5gRjU5x7buJfhB

I can add an additional shortcut for this, any suggestions? (note that shift-enter is already taken)

1 Like

Hello Pirijan,

Glad to hear that touch improvements are on the roadmap! In the meantime, I’ll play around with that experimental branch and see how well it fares on iPad.

I noticed that Opt + Enter inserts a newline within a card too. This works on both iPadOS and macOS. Is this something you added recently? Or has it always been there?

In any case, it solves my problem, at least when I use the Magic Keyboard. Without the keyboard, the only modifier key available on the iPad’s soft keyboard is Shift, so I suppose there’s nothing to be done about that.

I don’t mind it, to be honest. If I’m using Kinopio on the iPad, I nearly always have the keyboard connected.

1 Like

It’s always been there, glad to hear that works for you :slight_smile:

While this worked, I had to abandon this approach for now because it caused iOS crashes on large spaces during resize.

Investigating other solutions …

2 Likes