I don't know if this is something that can be helped, but when I tap and hold on a web page in mobile safari, or in cordova/phonegap-made apps run in iOS, there is this pretty useless empty "tooltip" popping up close to the top of the viewport, and it only moves horizontally across the screen.
Here is a screenshot of what I'm talking about (that annoying thing circled in red that totally gives away that this is a cordova app)
My question being : is it possible to prevent this behavior, and how ? It seems to not be present on anchor <a> anchor elements but putting anchors all over the place seems like overkill for this.
And if anyone knows, just so I go to bed a little less stupid, what is this feature called and what is it for exactly ?
I already have the following css properties in my body
-webkit-user-select: none;
and
-webkit-touch-callout: none;
to prevent the text selection and the copy and save of images.
I've downloaded other phonegap-made apps from the App Store and they too have this feature, so maybe there's no fixing it.
Anyways, thanks for taking the time to read this.
It's a bug on the UIWebview
It's been fixed on cordova and will be available on next release, but you can use this plugin meanwhile
https://github.com/EddyVerbruggen/cordova-plugin-ios-longpress-fix
Related
My website flickers out of control when scrolling on iOS mobile. Have't run into any issues on Android at all.
https://s3-us-west-1.amazonaws.com/stage.coefficientlabs.com/index.html
I've read through some similar forums discussing
-webkit-overflow-scrolling: touch;
-webkit-transform:translate3d(0,0,0);
-webkit-backface-visibility: hidden;
But none of my attempts seem to have worked. I think part of it is because I can't tell which specific element is causing the flicker. It just appears to me like the entire website is flickering.
I've used
-webkit-overflow-scrolling: touch;
in the past before, but now when I inspect the code, it says it has an invalid property value. Some others are experiencing the same thing; I think the feature got discontinued or something.
I just want simple, normal mobile scrolling that we're all used to expecting.
Thanks so much in advance!
EDIT
I've found out that once I click the "Click to get started" button, and close the popup, the flicker stops. This doesnt happen with any other buttons, just this one. I've been working on integrating this popup with the rest of the website, so it looks like this is the culprit.
Still dont have any strong leads to pursue...not sure why opening and closing this popup causes the website to respond properly.
EDIT 2
Okay so I removed one CSS sheet and now the scroll works. Trying to isolate what in this CSS file is causing this scrolling issue. Here is the link. Any idea whats going on here?
Okay turns out that the popup wrapper's css property "display: none" was interfering with some of the other css properties(?). I changed this to "display:block" and just coded another way to hide the popup wrapper with z-index. No more flicker!
Problem
We have an Ionic2 project. Ionic (on iOS) creates a Safari browser. Safari allows for what I call "overscroll". This is when you can scroll beyond the top or bottom of the page and the page snaps back.
One of our pages has a small signature pad. If a user tries to sign with their finger, they instead scroll the screen. The page content is small enough that it shouldn't be scrollable, but the overscroll causes the page to move.
Desired
We just want to disable the blasted overscroll.
Really all of our Ionic projects suffer from this drawback in some form or another, but this is the first project where it blatantly breaks functionality. In other cases it's just an annoyance.
Appeal
Is anyone familiar with how to disable this overscroll? Whether through ionic, a cordova plugin, or the HTML itself.
If I have understood you correctly then this is actually really easy to do.
Just add no-bounce to your <ion-content> element.
e.g.
<ion-content no-bounce>
I would like to add vertical scroll in Phonegap app. The app is able to move left and right.. but not up and down.. Need some guidance on how to do it.. Thanks..
depending on how your app is set up there are a few options out there.
1) If you don't need a fixed header ( very rare but does happen ) you can use a normal css approach, phonegap is just a webview wrapped as a native app, so most things in a browser will work here.
2) if you need a fixed header and footer I suggest iScroll.
iOS 5 gave us -webkit-overflow-scrolling: touch, which works in mobile safari, BUT since a webview is mobile safari's little brother you aren't given all of the awesomeness that regular safari has.
all containers, which are higher than 100% viewport con carry the CSS: overflow: auto or overflow: scroll.
important is, that the container (i think a div) is set to height: 100%.
this is a idea for solving with CSS.
I am developing a Phonegap app for the major os platforms and am currently testing it on an iPad with iOS 5. Im using jquery mobile. So for large screens i've used the splitview jquery mobile plugin. http://asyraf9.github.com/jquery-mobile/
I've put a
$scrollArea.css('overflow-y','auto');
$scrollArea.css('-webkit-overflow-scrolling','touch');
to make the page scroll instead of using iscroll like the plugin was using. Now whats happening, is that the page isn't loading/repainting as the user scrolls. I have a list of 100 items and i scroll through them. The scrolling itself isn't slow, but it takes almost a full second for the new list view rows to pop into view after it has been scrolled. Before that it's a blank area.
On observing, i can see that the the list items don't pop into view until the scrolling has come to a halt. (momentum scroll)
A similar issue is here http://forum.jquery.com/topic/help-with-slow-list-view-scrolling-on-ipad-when-scrolling-in-an-overflow-auto-div
What can i do to make this work normally?? The same thing works fine on android tabs. pls help.
EDIT: If i use only
$scrollArea.css('overflow-y','auto');
then i dont face this issue of momentary blank areas after scrolling, but then the scrolling is painfully slow.
Please don't suggest using iScroll. Already tried that. its much much slower that what i get with -webkit-overflow-scrolling, and i cant use it.
My Approach
So, I tried a lot and I read even more about this problem. I ended up with a solution which is "OK" to me (because it works), but which is definitely not near to "perfect".
When using this CSS:
.container {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
you run into a lot of problems when having a complex design (in my case a fullscreen background image), and it gets even worse, when using absolute positioned elements and iframes. (Which is - of course - both the case I needed).
So, what did the trick? Basicly this CSS:
.container > * {
-webkit-transform: translate3d(0,0,0);
}
With this rule the content was almost all the time rendered right away without getting those blank areas. Only when scrolling down the first time very fast it's a little flickering.
But be careful with the rule -webkit-transform: translate3d(0,0,0);. Using this rule heavily on many child elements forced Safari to: sometimes slow down but almost all the time to crash. The best thing is to wrap all content elements into a single div, works fine.
Done? Not really. There is still the iframe-issue: ("argh")
iframe
When the iframe is not fully in the visible part of the container at the start it gets cropped or is not even displayed at all. This could sometimes also occur when scrolling around. So, I tried to force Safari to re-render this part anytime scrolling is completed and came up with this:
//using jQuery
var container = $('#container');
var iframe = $('#iframe');
container.scroll( function (event) {
iframe.css( 'marginLeft', 1 );
setTimeout( function() {
iframe.css ( 'marginLeft', 0 );
}, 1 );
});
The thing with the scroll event on a touch device is, that it's only triggered when the scrolling has come to an end, so this function is not fired at anytime but when the momentum has come to an end. The short movement is actually not visible.
So, maybe this is helpful for somebody.
Further information
Here a few more links on this issue:
On how the scroll event is fired in iOS:
javascript scroll event for iPhone/iPad?
Bug report of this problem to Apple:
https://stackoverflow.com/a/7893031/1456376
iframe example with the same problem:
https://stackoverflow.com/a/8275972/1456376
We have used the plugin below in our project, did you try this one out?
https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
On iOS it uses hardware acceleration to render the scrolling. It is rather easy to use, all you have to do is to assign an additional class to your div.
We did have some issues on Android 2 with this plugin, to overcome those issues we changed the scrollMethod property in jquery.mobile.scrollview.js.
I hope it helps you solve your scrolling problem
As we all know, iPad do not support the <frame> element, but both Gmail and Ymail could do something similar by creating a 2pane style , and the navi pane (left one) could scroll (in ipad style). May I ask if anyone do have the idea how it created?
Thank you very much.
I don't actually know for sure how they've done it (I can't seem to reach mobile gmail in a desktop browser, and I can't find a view-source feature on my iPad) but I suspect that it's not as complicated as it looks.
Keep in mind that in a regular browser, when there is too much content we get a scrollbar. That's not how the iPad renders long pages. On the iPad, if there is too much content we never get a scrollbar, scrolling is achieved by sliding the content up and down. So what we should imagine is that this is two panes with scrollbars, because that's how it would show up in a normal browser.
From there, it's a much simpler problem. It's probably just two divs floated in a standard two-column layout, each with their overflow set to scroll. Something super-basic, like:
<div>
{the nav list of emails goes here}
</div>
<div>
{the currently-open email goes here}
</div>
<style>
div {
float: left;
width: 50%;
overflow-y: scroll;
}
</style>
There's probably something fancy in there to make each div consume 100% of the available height (it's probably not as simple as height: 100%) but already if either div contains enough content, we'll get individual vertical scrollbars which the iPad will hide, giving us that neat sliding-scroll gesture instead.
I've tested a few of my own apps which were build back in time with Frames. They all worked "normally" are you sure you didnt use the wrong Doctype for your HTML?
Individual block elements with overflow-y:scroll are only scrollable with two fingers on the iPad. That's just the way it is.
So how does Gmail do it differently? Manually, with JavaScript, reacting to various touch events.
Your best bet at the moment is to use iScroll. This used to be a bit un-smooth (compared to Gmail and others' implementations), but the latest version is really good. Try their demo.
It works on iPad/iPhone, Android, and you can even use it in a normal browser using your mouse. It has the nice elastic effect when you reach the top/bottom of a scrollable area, and it has the iOS-style scroll indicator thing that appears on the right during a scroll. It's almost as smooth as scrolling on a native app.
By the way, if you want to examine an iPad-specific website's source, the easiest way is using Safari (I've tried this on 5.0.3 for Mac, but probably works on other platforms too). Turn on the Develop menu (Safari>Preferences>Advanced), then you can set your User Agent to iPad.
You can do the same thing in Firefox, posing as an iPad, but I often find the websites look completely broken. I think this is because many iPad/Android-specific websites rely on Webkit features that aren't present in Gecko. In fact, Apple's iPad guide site, which also uses a two-pane scrolling technique, simply rejects you if you're not (a) sending an iOS User Agent string and (b) using Webkit. And Chrome doesn't have an easy way to change your User Agent string. So Safari is the easiest way to examine these kind of sites.