I got in touch with bubble already about this, but on the iPhone I am getting very weird behavior with my inputs since the iOS 11 upgrade that is causing the cursor for the inputs to be misplaced and jump around all over the place. This results in essentially the user being almost completely unable to use inputs on mobile.
The bubble support team told me this is a patch that apple needs to fix since the IOS update but I’m just trying to assess how widespread this issue is and/or whether my responsive settings may be exacerbating the issue. Any assistance greatly appreciated! See screenshots below for reference.
I’ve only done a bit of testing around this, but it seems like there’s an issue with the focused inputs dropping from the popup back to the main page. Is that what you’re encountering?
Yes that’s exactly right. The normal inputs that are not in popups don’t have issues focusing but I still get the odd white color in the top left of the inputs for non-popup ones.
What’s so baffling to me is that if you go to the app rippleconcerts.com that’s in the showcase and run it on an iPhone with IOS 11 and press login at the top right, they have inputs for username and password in a popup but I’m not experiencing the same behavior with their app as I am with mine. Obviously there’s only one input type from the element selector in Bubble so a little lost.
Shot in the dark, but it may be an issue with how it interprets the order of the the inputs. (On rippleconcerts.com, there are only two inputs at the very bottom of the page).
Think about this way. Every component has a list of inputs associated with it. (The page itself - divided up by containers, and applying a sort of sequential numbering - popups, etc). What I crudely guess is happening is that it is flattening that list into one single list. You could try playing with bring to front/send to back, but likely not going to fix it.
I think that makes sense but i didn’t really change anything on this page for a while and it used to work and then suddenly this started happening recently.
Unfortunately, the fix they suggest here is not a good option on Bubble. But there are quite some posts about this issue, so hopefully Apple is listening.
Ok awesome. However, after spending hours and hours trying to work at this I actually came up with a Bubble-side solution! What was happening was that I was making a reusable popup smaller in height in order to hide some white space below a group that i was hiding depending upon whether the user was signing up or loggin in. After readjusting the size of the reusable element so that it was big enough to fit both groups the issue has actually gone away. Never suspected something like this to matter. All is well for now mostly but I agree there must be some apple side issue since we get that little white mark in the top left of the inputs that weren’t there before.
I also have a problem with iOS 11 on iPhone.
Pictureuploader is not working.
If you want to take a picture (phote) you can only see a black screen with camera controls. That’s it.
We ran into the same issue this week with the inputs on iOS (ours was in a floating group), and we have been able to solve this by including this code snippet into the html header:
@vladlarin that is truly amazing! A true lifesaver and it works! I put the code in the SEO and metatags section in bubble settings under advanced settings script in the header.
I guess that it’s fixed it doesn’t matter as much, but just curious could you let me know exactly what this code is doing and how it addresses the bug technically?
Hi @vladlarin, quick follow up. I noticed when you put the code snippet in the header your site can become slightly off center and cause horizontal scrolling bars to appear on the bottom of the page in the browser (basically site seems like it was shifted a couple pixels to the right). Not a huge deal and would obviously prefer to have that then the inputs not working but do you know how to address this? This only appears on desktop and not mobile. Thanks!
Another issue has come up unfortunately and doing some research to try and fix it. Unfortunately an unintended side effect of putting that html code in the header is that when you have a popup you can’t scroll down. Obviously an easy fix would be making your popups smaller but i have a popup that can’t be made smaller and it can’t fully display on an iphone 5/5s. Anyone have any thoughts? Unfortunately when you fix one thing it breaks another lol!
That’s a bugger yeah. We also did find out that it does mess with the overall scroll logic (as the syntax suggests, duh).
Just as a thought that if you have a popup that actually needs to be scrolled, then maybe a good idea would be to make this form a separate page (or maybe, a group within a working area of a page), not a popup?
I know I’m not answering your question just yet, and we will do as soon as we figure out, but this would be kind of a quick workaround to this situation.
