We are developing an app using Phonegap/Javascript.
Scrolling used to work fine, until we tried the new Android 5.
The page does not scroll down, unless you swipe many times. Then it is stuck in the other position..
Can't find anyone with this problem!
We are using just simple divs with content that is taller than the screen. Works fine on Android <5 or iOS.
Any ideas?
This is what finally solved the problem, along with simplifying properties, etc.:
Hammer.defaults.stop_browser_behavior.touchAction = 'pan-y';
It was an issue with the hammer.js plugin with touchAction property.
This affects some browsers - and apparently also Android 5 (but doesn't affect Android 4.* when using PhoneGap).
Not as simple as it seems, more details here:
https://github.com/hammerjs/hammer.js/wiki/How-to-fix-Chrome-35--and-IE10--scrolling-(touch-action)
Related
I am facing some bugs when i use scrollIntoView library in my code for an iPad. It is working on other devices like android but not on iPad. Eventually, if i remove that line of code, it doesn't through any errors. I need the scrollIntoView in for the following functionality-
I have a list of attributes(lets say list of accounts), when i click on any account that specific account should move to the top of the list( should not replace the position id's. Just scroll the view to the top with selected account in first). How can i achieve this with out using scrollIntoView?
I researched a bit on this but couldnt get a solution. I tried smoothscroll with polyfill but couldnt get it work. Any suggestions out there?
I followed the below post but of no luck :
Mobile Safari, scrollIntoView doesn't work
On my website, I experience - and a lot of others do on theirs - a kind of jumping/lagging effect with Internet Explorer 11 (on a Windows 8.1 machine) when creating a parallax. On Firefox for example it is working absolutely fine.
According to my research, this is a common problem with IE11 that has no solution, but I have found a website that somehow fixed the issue (or made a Workaround?!?) :
http://focuslabllc.com/journal
But my website has the same issue as this one:
http://negativespacealphabet.com/
What are they doing differently to get it work? I appreciate your help!
Best solution I have seen to this issue is to use transition on whatever properties you are using to create the parallax.
Example, you use transform:translateY to create a parralax effect, then add:
transition:transform 10ms linear
This forces the parralax to animate smoothly.
Downside, its not fully backward compatible with older browsers
I need to display a huge image (at least 2000x2000) on Android with Titanium and let the user scroll around, just like they were using a scroll view on iOS. However, I know Android doesn't support the same kind of scroll view, so I opted to use an ImageView.
I'm unable to display this image properly or at least the way I'd like (without it being blurry when you zoom in) because of memory issues. Has anyone found a way to make large scrollable images work in Titanium on Android without potential memory crashes?
I tried WebView also, but it seemed to resize my image and when you zoomed it was blurry as well. I was hoping Android webview supported SVG, but it looks like they don't on a majority of devices.
This is by far the best answer I've found:
http://www.tenxperts.com/2011/07/13/working-with-large-images-in-android/
I tried it and it works well with Titanium web views.
I'm developing an HTML5 Web App and am in dire need of a javascript replacement for the css 'position:fixed' for < 5 iOS devices.
I stumbled upon an article from Google explaining their approach for their GMail mobile web app here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
Like many similar javascript libraries, this supposedly, utilizes touch events and webkit transforms to move a div within a container giving the illusion of native scrolling and leaving room for fixed (actually absolute) toolbars.
I have attempted to implement this javascript class with little to no success...
Current, I am stuck with this error:
"TypeError: 'undefined' is not an object (evaluating 'this.element.style.webkitTransform = 'translate3d(0, ' + offsetY + 'px, 0)'')"
I through in a console.log to make sure that at this point, 'this.element' is in fact, an element and it is. I am passing the scroller div through correctly.
I have been testing on the iOS Simulator as well as the Mac OS X Safari and have also checked GMail's mobile site on both to make sure they work properly as well - they do (even though I can't guarantee this is indeed, the same methods they use).
Am I missing something obvious? Something subtle? Any clues would be appreciated.
jQuery Mobile doesn't support true fixed headers/footers; they disappear when you scroll and reappear when you are finished scrolling.
jQuery Mobile not only provides a set of beautiful and cross-browser widgets, but it also provides a mechanism for fixed positioned toolbars.
JQmobi does a great job: http://jqmobi.com/testdrive/
JUery Mobile goes a long way to "solving" this problem.
But forces your users/visitors to load 414kb of CSS+JS!
For many people on slow 3G/Edge Connections your page/app will take 10sec+ to load. :-(
Try this in your CSS:
body { -webkit-overflow-scrolling: auto; }
Read more at: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
When viewing Gmail with an iPhone, they have it setup so that there is a statically positioned control bar at the top of the screen. Even if you scroll up and down on the page, it doesn't move. I'm curious if anyone know how they have set this up.
As far as I have heard in the past, it isn't possible to create fixed controls using CSS on iPhone's Safari. Instead it has to be something you hack together with Javascript. Do the same techniques work for Android's browser?
Ideas? Thoughts? Thanks.
In general the way this works is by overriding JavaScript touch handlers to prevent the default scrolling mechanism in the webpage. Then inside the touch handler you manually calculate touch physics and position the content in JavaScript.
Since you asked about Gmail's implementation it's worth noting that the Gmail team blogged about their implementation here: http://code.google.com/mobile/articles/webapp_fixed_ui.html
iScroll which has been mentioned by other posters is probably the best known open source implementation: http://cubiq.org/iscroll
Apple's own implementation of this is known as PastryKit but it isn't well documented and not open source: http://daringfireball.net/2009/12/pastrykit
Update: I just reread the question and noticed you were asking about Android (doh!). Looks like Android 2.2 added support for CSS fixed: http://kentbrewster.com/android-scroller/
I'm not super familiar with iOS web app development, but iScroll looks promising.
This is just a simple CSS style:
.className{
position:fixed;
}
You are right in that position:fixed; doesn't work in Mobile Safari but I believe it does in Android.
Here is that script you were talking about to make it work in mobile Safari:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch