When scrolling a view with a textarea, the text area changes height while scrolling. After scrolling the original height is restored. This happens both in the Chrome device emulator and on iOS/Safari. See video for example:
https://www.youtube.com/watch?v=iMYaScyFL74
This example is based on the tabs example application
<ion-content class="padding">
<div class="list">
<label class="item item-input">
<textarea rows="10" placeholder="Write something then scroll the view while the textarea is focued"></textarea>
</label>
</div>
</ion-content>
Note that you have to enable the device emulator in Chrome to reproduce the problem. You can find the full source here:
http://codepen.io/moberg/pen/myyYMJ
Anyone knows how to make the textarea preserve its size while scrolling?
This is a known issue: https://github.com/driftyco/ionic/issues/1934
A fix seems to be ready to be merged atm: https://github.com/driftyco/ionic/pull/3007
I am using the StageWebView Class to show html pages inside my iOS app. Everything is working fine except for the scrolling. It allowing the end-user to scroll the entire webview and is showing an unsightly gray background after reaching the end of the pages content.
My question is: Is there a way to disable the scrolling past the content of the page?
I don't think there's a way to do what. The StageWebView uses the iOS default browser which implements this feature (with a different background color, the behavior is the same though).
Did you try with this viewport?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The important part is user-scalable=no which should remove the "scroll bounce" of the iOS browser.
This question already has answers here:
Disable Auto Zoom in Input "Text" tag - Safari on iPhone
(39 answers)
Closed 2 years ago.
The code:
<select>
<option value="1">Home</option>
<option value="2">About</option>
<option value="3">Services</option>
<option value="4">Contact</option>
</select>
When I touch select, the iPhone zooms in that element (and does not zoom out after deselecting).
How can I prevent this? Or zoom back out? I can't use user-scalable=no because I actually need that functionality. It's for iPhone, select menu.
This can be prevented by setting font-size:16px to all input fields.
UPDATE:
This method no longer works on iOS 10.
It depend from the Viewport, you can disable it in this way:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
add user-scalable=0 and it should work on your inputs as well.
For iOS, you can avoid zooming of input elements by simply allocating a font size to them that's considered sufficient by the OS (>=16px), thus avoiding the need to zoom, e.g.:
input, select, textarea {
font-size: 16px;
}
It's a solution also utilized by various frameworks and allows you to avoid the use of a meta tag.
This might be helpful to look at:
Disable Auto Zoom in Input "Text" tag - Safari on iPhone
You'd basically need to capture the event of tapping on a form element, then not run the default iOS action of zooming in, but still allowing it to zoom for the rest of the page.
Edit:
The link mentions,
2) You can dynamically change the META viewport tag using javascript
(see Enable/disable zoom on iPhone safari with Javascript?)
To elaborate:
Viewport meta tag is set to allow zooming
User taps on form element, changes meta tag to disable zooming
Upon pressing done, viewport is changed to allow zoom
And if you can't change the tag when clicking on a form element, put a div that mimics the form element that when you press it, it changes the tag, then calls the input.
The most up voted answer to set the font-size does not work for me. Using javascript to identify the client together with the meta tags in the answers here, we can prevent the zooming behavior of iPhone on input focus while otherwise keeping the zooming functionality intact.
$(document).ready(function ()
{
if (/iPhone/.test(navigator.userAgent) && !window.MSStream)
{
$(document).on("focus", "input, textarea, select", function()
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">');
});
$(document).on("blur", "input, textarea, select", function()
{
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
});
}
});
It seems like we have to replace the meta tag with new values on the blur-event, just to remove it does not seem to trigger an updated behavior.
Note that the UI is still initializing the zoom, but it quickly zooms back out again. I believe this is acceptable and iPhone users must already be accustomed to that the browser is having some dynamic zooming going on anyway in applicable scenarios.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Not working anymore on iOS10.0.1
font-size:16px works
Setting the font size works perfectly for input elements, but not for select elements for me. For select tags, I need to actively disable viewport zoom when the user starts interacting with the select element, and then reenable it on finish.
//the mousedown event seems to be the one that does the trick, versus 'focus', because focus fires after the zoom already happens.
$('select').mousedown(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=0">');
})
$('select').focusout(function(){
$('meta[name=viewport]').remove();
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=yes">' );
})
Just found a simple fix if you're using Bootstrap:
As mentioned in w3s: You can quickly size labels and form controls within a Horizontal form by adding .form-group-lg to the element.
<form class="form-horizontal">
<div class="form-group form-group-lg">
<label class="control-label">Large Label</label>
<div>
<input class="form-control" type="text">
</div>
</div>
See second example on this page:
http://www.w3schools.com/bootstrap/bootstrap_forms_sizing.asp
Tested it in Safari and Chrome on an iPhone SE and it works like a charm!
So here is the final fix which works well for me.
#media screen and (-webkit-min-device-pixel-ratio:0) {
select,
textarea,
input {
font-size: 16px !important;
}
}
here is the jQuery Solution works well for me.
device_type = (ua.match(/iPad/i) || ua.match(/iPhone/)) ? "touchstart" : "click";
if(device_type === "touchstart" ){
$('head').append('<style type="text/css">input, select, textarea {font-size: 16px;}</style>');
}
Use maximum-scale=1 instead of user-scalable=no to prevent the form zooming issue without breaking the user’s ability to pinch zoom.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
We ran into this issue at my work and found a similar answer to #alex. We can manipulate the viewport tag if it is an iOS device:
document.addEventListener('DOMContentLoaded', event => {
if (/iPhone/.test(navigator.userAgent) && !window.MSStream) {
const metaViewportTag = document.head.querySelector('meta[name="viewport"]')
metaViewportTag.content = 'width=device-width, initial-scale=1, maximum-scale=1'
}
})
This prevents zooming form controls on focus in iOS and still allows Android to work as normal.
I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, user-scalable=no" />
What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.
Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?
EDIT:
status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?
This will prevent scrolling on the whole page
document.ontouchmove = function(e) {e.preventDefault()};
In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO
Extending dmanxii's approach here is what we are doing.
$("body").on("touchmove", function (event) {
if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
//console.log("NOT Disabled");
}
else {
//console.log("Disabled");
event.preventDefault();
}
});
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim