Forum Documentation Showcase Pricing Learn more

IOS 11 Extremely Weird Input Behavior

Have run into this as well.

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.

Their popup is also not responsive but I don’t see why they would make a difference

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.

People are talking about this

https://hackernoon.com/how-to-fix-the-ios-11-input-element-in-fixed-modals-bug-aaf66c7ba3f8

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.

1 Like

Hi Emmanuel,

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.

-Jonathan

1 Like

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.

hi Jonathan!

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:

<style>
  .main-page{
    -webkit-overflow-scrolling : touch !important;
    overflow: auto !important;
    height: 100% !important;
}
</style>

See if it works for you please!

5 Likes

Hi @lakeman just tried that out and it’s working ok on my end…

@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!

We used this article as an inspiration : https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

Basically, we’re overwriting a bit the scrolling and height parameters of the main css container for the page.

Try this one to try and address the scroll issue:

<style>
  .main-page{
    -webkit-overflow-scrolling : touch !important;
    overflow-y: auto !important;
    height: 100% !important;
}
</style>
3 Likes

Worked! Thank you so much you’ve been very helpful!

Hi guys,

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.

Cheers!

Lol yeah guess it’s somewhat of a good thing we don’t understand the simplest code snippets haha.

And yes I am starting to explore other areas around this instead of making it a popup, and stumbled upon this from the forum…https://viewportdemo.bubbleapps.io/version-test (original post - Fullscreen popup).

Going to try to implement this as a full screen popup that spans the entire viewport and let you know how it goes!

Sorry post is here…Setting a group to be % of viewport height dynamically

Hi guys,

just wanted to give an update here a peculiarity that I need to point out. This may not actually be as much of an issue as I thought because of the way I have my popups set up. Currently I have a signup and login popup where you can press a button and switch between two different groups in the popup…a signup group and a log in group. The signup group is greater in height because of the additional information required obviously. The popup is about 400 pixels in height and reusable, but when I place it on the page to be used I actually make the popup on the page less in height so that the empty space below the log in group in the popup disappears when you toggle back and forth between signup and login groups. It turns out if you keep the height of the popup on the page the same as the actual height of the reusable element then you can get the best of both worlds…the inputs work as intended with the script described above and the popup scrolls down on the page. Only issue is working with the empty space (just a short term visual issue until aapl fixes the bug.

2 Likes

This topic was automatically closed after 14 days. New replies are no longer allowed.