I'm developping a mobile web application and this bug appears when I want to focus an input by taping on it. If the keyboard goes upper than the input, I cannot scroll down my screen to see the input, and if I type something, nothing appears in the field.
I have to go to another field by using the arrows on the keyboard, and then go back.
Anyone knows a way to fix that?
I'm using the latest version of Twitter Bootstrap, Spinejs, safari, ios7.
Thanks!
I've found the solution in this stackoverflow post, it's a safari bug on ios7: Issue with iOS 7 Mobile Safari Scroll Events on Keyboard Up and Down
Related
I have a very inconsistent issue with iOS Safari on iOS 10.2/10.2.1 (at least). On many iPhone 7,6,4 it works without an issue but on at least 2 iPhone 7 I had this issue.
I have a position: fixed; bottom: 0; input element on my page. If the placeholder is e.g. Name, Safari will offer to autofill it with a contact name in the suggestion box above the keyboard.
The problem is that on some devices, this suggestion box of the keyboard will overlap the input element at the bottom of the page:
The suggestion bar was expanded when the keyboard opened and was not manipulated afterwards by collapsing/expanding it.
On many tested devices this does not happen, only on a few of them.
Only the suggestion bar seems to be the issue. The normal input switch bar does not exhibit the problem. When I change the placeholder to something else, Safari won't try to autofill it and everything seems fine:
(Except for the small white gap at the bottom but I could live with that)
Does someone know why this might be happening on some devices? And maybe even how I could go about fixing this?
(Side note regarding a possible workaround: As I said it seems like Safari parses the placeholder to decide when and what to offer as autofill. When I change it to something else it won't show up. Simply disabling it for that one field like that would be finde but the same thing happens on an "Email" field and there is no smart alternative word to use as a placeholder.)
For whatever it is worth, I just had this issue and resolved it by switching out the <input> element for a <textarea> element. Everything is working as expected -- I am not seeing the autofill suggestion anymore.
I am building a website which works fine on browsers on a laptop but when i start using the same on a mobile browser, i see that the only thing I am able to do on my mobile browser is to double tap to zoom in and be able to click and type.
I am not able to scroll or move the web page around to change the view port.
Has someone experienced the same problem before?
I am using bootstrap for this and the layout is responsive.
Please help.
Thank you
I have found a very strange issue that seems to only affect iPhones/touch devices using the Safari browser.
When you load any page of our website, e.g. http://199.119.123.135/surety-bonds/commercial-bonds/auto_dealer_bond.htm, tapping anywhere on the page brings up the keyboard as if it's detecting a text field.
I've done a lot of research but couldn't find anything on the subject or how to fix it. Anyone have ideas? Thanks!
I have a cordova app where there is some input fields which requires the keyboard. But when the keyboard is open it's like the app is frozen. More specific, I have a div as a bottom bar which has a fixed position, but when the keyboard is opened, it can scroll, however when I close the keyboard, everything returns to the expected position. Any idea how to make it not freeze? This is only a problem on iOS. Android works perfect.
My app has the same issue, selecting an input field causes the keyboard to show up and severely lag the app until the keyboard is hidden. After testing simple pages with no scripts or css on multiple devices I found that it primarily affects iPads on at least iOS 8.0 and above. It can cause slowdowns on iPhones but they seem to recover a lot faster.
The best solution I've found so far is to setup an in app keyboard. For my login page, I have an element that is styled as an input field and when it is clicked, it toggles a keyboard div element to appear which has buttons for each key inside it.
I am using Bootstrap 3 on a site and I found a weird bug that I can't figure out. It deals with the mobile menu on smaller devices. When I view the site on iOS I can see the menu icon appear, but when I click on the icon the menu does not show up. However, if I then click an area where the menu should appear, the link works and takes me to a page.
To add another variable to the problem, when I view it in chrome with the dev tools acting as iOS and the screen small, the menu shows up and works as intended. So I am at a loss how to debug the issue.
I have tried setting the z-index to 1000 with no luck. I have not been able to find documentation regarding this issue. If you have run into this issue or know where there is documentation for it I would really appreciate some help.
Here is a link to the site with the issue(on mobile devices). http://dd.cakeandeatitdesigns.com
Thank you for your time and help!
Hey in my personal experience working with that it could happened when you open your web page with safari in IOS. I don't know what are you using to show the lateral menu, but some times safari doesn't work with certain js.