We are having a bug in our iOS app when using an HTML text input in a webview.
Here is the HTML :
<!doctype html>
<html>
<head>
<title>Test</title>
</head>
<body>
<input type="text"/>
</body>
</html>
If the input is tapped once, it works perfectly : it gets the focus and the keyboard appears, the user can type. However if the user taps again on the input, the cursor moves to the far left of the input and nothing that is typed appears in the input.
This bug can be seen on iOS7 and iOS8 devices in a webview. It does not appear in Safari or Chrome.
To see this behavior, I've uploaded this video.
I have tried to find a JS solution, playing with .focus(), without any success. Does anyone have a clue on where it might come from, or how to solve this?
Add this metatag in html head section:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi, user-scalable=no" />
Related
I'm working on a web app (no UI libraries) where I want switching windows to update the document title. By "windows" I mean floating <article> elements on the page, not browser windows.
In Firefox 90, the following code runs instantly. It does in Safari 12 also, so I can't call this a WebKit problem. But in Chrome 91 and Edge 91, at least on the macOS 10.14 machine I'm using, there is a noticeable split-second delay between pressing the button and the title changing.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onClick="document.title='foo';">foo</button>
<button onClick="document.title='bar';">bar</button>
</body>
</html>
Is there any way to alleviate this? Trigger some kind of document.title "repaint" or "reflow", if you will?
I do not think that this can be fixed, I have noticed the same thing. I think it is created by the programming of the browser itself, not the website.
I have a classic asp application which runs on the IE 11 Enterprise mode, where I added the jQuery popup with some search function on it. This functionality works properly with Normal mode but not with Enterprise mode(search functionality and CSS for popup to look decent). Anybody knows the reason?
I have added the below libraries.
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<script type="text/javascript" src="../javascripts/lib/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="../javascripts/lib/chosen_v1.1.0/chosen.jquery.min.js" type="text/javascript"></script>
And there are tow other JavaScript file which is related to the popup functionality.
The page is a part of the iframe and iframe contain the above changes.
I would appreciate your help. Thanks in advance.
I found the answer and below are the changes.
<!doctype html>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE11">
I'm trying to get the Facebook Post embed working on my own site using their JS SDK but it doesn't seem to show up.
Some inline styles on the embedded iframe and the span it encapsulates it, controls the display of the widget.
I found some hacks but they aren't perfect. I used facebook's JS playground on the same code and it works.
There aren't any stylesheet interfering with this file and no extension as well as I checked in firefox and the result was the same.
edit: posting the code here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.12" async></script>
<div class="fb-post" data-href="https://www.facebook.com/20531316728/posts/10154009990506729/" data-width="500"></div>
</body>
</html>
Kindly see the photo attachment.
Thanks
P.S. Facebook code is directly copied from their docs, HERE
I assume you tried this by just opening the HTML file in your browser. You have to open it using a local or remote server. If i start it with a local server with the exact same code, it works perfectly fine.
For example: https://www.npmjs.com/package/http-server
Our React web application uses a Stripe element form for checkout (see here for details). It injects an iFrame form into the website. As expected, when using the site on iOS Safari, the credit card keyboard pops up when the user focuses on the Stripe input.
But then things go wrong. First, if the user taps elsewhere on the page, the keyboard stays up. Not a huge problem, because you can tap 'done' to dismiss the keyboard.
But then - ANYTIME a user taps on the site, the keyboard pops up. Tapping 'done' does nothing - on the next tap, it pops up again. It finally stops after the user focuses on another input field.
I've tried manually calling blur() on the Stripe element when the React component unmounts, but with no luck. Incredibly, you can replicate this issue using the Xcode simulator. What in the h*ck is going on?
Are you using Firefox on iOS by any chance?
I just had this issue: I would click on an input box, then click 'x' or 'done' on the keyboard, and then whenever I clicked anywhere else the keyboard would pop back up.
The code that simulated it is here
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
</head>
<body>
<div>
<input value="hiya">
</div>
<div>Click here after clicking the input and the keyboard will come back.</div>
</body>
</html>
It does not happen on Safari or Chrome.
I have an external page which I call in webview in iOS app. the page has modal popup for the survey in which user need to input text. once the popup opens and tap the textbox, keyboard appears but the text is not updating in the textbox. Please give suggestion as I am new to iOS development. Thanks in advance.
This is iOS7 bug,Try this
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi">
Setting height=device-height in meta tag seems to solve this.