Comments (9)
I've rewritten some comments so that future readers can find the solution easily. Closing the issue now.
from famous-flex.
I'm assuming that's on Android?
from famous-flex.
No, it's on iPhone5!
from famous-flex.
That is very strange because iOS doesn't change the viewport size when the keyboard is shown. It does however change the window.scrollTop in order to make sure the focused element isn't obscured by the keyboard. Does your input element appear on the bottom part of the screen?
from famous-flex.
Yes!
The input element is halfway the screen, so iOS scrolls to the element to make sure it stays visible.
The solution was to call window.scroll(0,0)
after the keyboard has closed.
Thanks Hein for the window.scrollTop
hint!
from famous-flex.
Awesome, glad that has been resolved :)
Btw, here is the code I use to deal with that exact same problem:
/**
* Fixes that ensure everything runs without glitches on all
* browsers and all platforms.
*
* @module
*/
define(function(require) {
var ElementOutput = require('famous/core/ElementOutput');
var Surface = require('famous/core/Surface');
var browser = require('bowser').browser;
var Engine = require('famous/core/Engine');
/**
* In case of Internet Explorer and Firefox, make sure the z-Index is
* explicitely set so that all z-indexing is performed correctly.
*/
if (browser.msie || browser.firefox) {
var oldCommit = ElementOutput.prototype.commit;
ElementOutput.prototype.commit = function(context) {
oldCommit.call(this, context);
if (this._element) {
var zIndex = this._matrix[14];
if (this._element.style.zIndex !== zIndex) {
this._element.style.zIndex = zIndex;
}
}
};
}
/**
* There is a bug in recall which causes the latest setContent()
* call to be ignored, if the element is removed from the DOM in
* the next render-cycle. This causes some buttons to not update
* properly always (sometimes they showed the loader or nothing).
*/
Surface.prototype.recall = function recall(target) {
if (!this._contentDirty) {
var df = document.createDocumentFragment();
while (target.hasChildNodes()) {
df.appendChild(target.firstChild);
}
this.setContent(df);
}
else {
this._contentDirty = true;
}
};
/**
* Sometimes, the browser scrolls the window up, hiding the top
* part and exposing the empty bottom part. This seems to be related
* to keyboard focus. This handler focus the scroll-position back to
* 0, but only when there is no focused input or textarea. On mobile,
* when an input or textarea is shown, it also shows the soft-keyboard
* and the scrollTop is purposely changed by the browser. This situation
* should be respected at all cost.
*/
function _isActiveElementAnInput() {
var activeElementType = (document.activeElement && document.activeElement.tagName) ? document.activeElement.tagName.toLowerCase() : '';
return ((activeElementType === 'textarea') || (activeElementType === 'input'));
}
var iOSKeyboardHeights = {
iPad: {
landscape: 435,
portrait: 348
},
iPhone: {
landscape: 164,
portrait: 254
}
};
var maxScrollTopReached = false;
var landscape = window.innerWidth > window.innerHeight;
Engine.on('prerender', function() {
// When an element has the focus, iOS scrolls the top of the body up to accomedate
// for the input. We don't want this in our absolute positioned famo.us application, so
// we scroll just ...
var maxScrollTop = 0;
var scrollTop = document.body.scrollTop;
landscape = window.innerWidth > window.innerHeight;
if (_isActiveElementAnInput()) {
if (browser.ipad) {
maxScrollTop = landscape ? iOSKeyboardHeights.iPad.landscape : iOSKeyboardHeights.iPad.portrait;
}
if (browser.iphone) {
maxScrollTop = landscape ? iOSKeyboardHeights.iPhone.landscape : iOSKeyboardHeights.iPhone.portrait;
}
}
if ((scrollTop > maxScrollTop) || (maxScrollTopReached && maxScrollTop)) {
document.body.scrollTop = maxScrollTop;
maxScrollTopReached = true;
}
else {
maxScrollTopReached = false;
}
// When typing in an input or textarea, and the input or text-area touches the right
// edge of the screen, the browser will scroll right a little bit to accomedate for
// the text input. We don't want this in a famo.us application, and therefore force
// scrollLeft to 0 when this situation is detected.
if (document.body.scrollLeft !== 0) {
if (_isActiveElementAnInput()) {
//console.log('fixing scrollLeft:' + document.body.scrollLeft);
document.body.scrollLeft = 0;
}
}
});
});
from famous-flex.
I'm using latest master and I don't like that you're manipulating my scroll positions! Can I disable this?
from famous-flex.
That code isn't in famous-flex if that is your question? It's just a snippet I use in my apps. Do whatever you want with it :)
from famous-flex.
Oh yes, my mistake :)
from famous-flex.
Related Issues (20)
- velocity limit HOT 10
- Pull to refresh on desktop HOT 3
- any plans to support https://github.com/Famous/engine/tree/v1.0.0? HOT 7
- Scrollview: scroll without animation HOT 3
- Invalid bower version HOT 2
- FlexScrollView - mousepad two finger scrolling doesn't work in paginated view
- LayoutController insert 0 not working HOT 6
- CollectionLayout last row just partial visible HOT 1
- WheelLayout (DatePicker) sometimes wrong number sequence HOT 7
- Possible Bug in CollectionLayout HOT 5
- Is mixed-mode really good(right) ? HOT 7
- What is the state of Famous-Flex? HOT 6
- Surface leakage issue because of Entity.register HOT 2
- Bug in DatePicker.Component.FullDay HOT 7
- SamsaraJS support
- Error: HOT 6
- Correction in documentation HOT 2
- Use famous-sizeconstraint with FlexScrollView
- Changes to LinkedListViewSequence does not get reflected in FlexScrollView
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from famous-flex.