I've created an app for Android and iOS using Phonegap and Ionic Framework, the goes perfectly on Android but it has an issue on iOS specially with the iPhone 5 and the iPad (It works well on iPhone 6 and 4).
When you tap a button that makes the rol of a backbutton, the back animation is shown but inmediatly the goes back to the section where the backbutton was taped. It only happens on one section, the backbutton works perfectly on the others sections.
The HTML element is the following:
<a class="button button-icon button-positive button-positive icon ion-arrow-left-c" ng-click="atras()">
The function called is "atras" which is the following (Located in the controller of the template):
$scope.atras = function() {
$ionicHistory.goBack();
};
Have any idea of how could i resolve this? Thanks a lot for your answers!
Specifically, there is a notable patch for Ionic UIWebView that are built on iOS9. Without this patch, you will experience such flickering issue when you tap on some back buttons in navigation bar. Please apply ngIOS9UIWebViewPatch for your project then it's all done.
https://gist.github.com/IgorMinar/863acd413e3925bf282c
http://blog.ionic.io/ios-9-potential-breaking-change/
Unfortunately iOS 9 has some bugs with with window.location that impact the router-ui and also some empty href links <a href="#"> like yours.
Take a look to these articles from Ionic's blog:
Preparing for iOS 9
iOS 9 Potential Breaking Change
There you can find the link to the iOS9 patch for angular and this for Disable App Transport Security in iOS 9
Add these two properties to prevent flickering effects:
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
Apply also to flickering elements which AREN'T being animated for the same fix.
Related
I just started testing my Ionic 5 app in IOS 15.0.2 and when I long press on any image it's allowing me to drag the image to other apps and photos and directly save it. When I drag the image to any text editor app, it shows the base64 string of the image.
The same is not happing in IOS 14 and I need to stop this behavior of the app. How can I control this from my ionic app?
The following CSS resolved the issue.
img {
pointer-events: none;
}
Now there are no event fired on long press images.
just try:
-webkit-user-drag: none;
or you can reference：https://www.denisbouquet.com/css-forbid-selection-user-select-dragging-ghost-image/
I am facing a problem very similar to what was reported and resolved in this SO Question: iOS 11 Safari bootstrap modal text area outside of cursor
. However, the difference for me is that I am using Aurelia & Semantic UI.
I have tried using position: fixed in ux-dialog-body as described in several fixes for the problem occuring in bootstrap (in those examples to be added to the body of the modal), however that did not work.
I would appreciate any help on this issue, thanks in advance.
So I got the idea for the fix here : Semantic-Org/Semantic-UI-React
Basically the problem relates to the height of the content behind the modal/what the modal is lying on top of. So, hide all of it when opening the Modal and put it back when done. However, only for iOS, because for some reason on our site doing otherwise breaks Android devices.
iOS: boolean = !!navigator.platform && /iPad|iPhone|iPod/.test(navigator.platform);
In opening the modal
if (this.iOS) {
$('body > :not(ux-dialog)').hide();
$("ux-dialog").show();
}
And closing
if (this.iOS) {
$('body > :not(ux-dialog)').show();
$("ux-dialog").hide();
$("ux-dialog-overlay").hide();
$("ux-dialog-container").hide();
}
I hope this helps someone else.
I've been working on a new responsive website, and when I start testing in on IPad, I found that it was crashing consistently (tested on IOS 6, IOS 7 and IOS 7.1.1).
After a few hours, I found that what was causing the crash was this CSS instruction:
-webkit-backface-visibility: hidden;
I was able to create a sample on jsfiddle that replicates this issue:
http://jsfiddle.net/CBqCH/6/
In our case, we were using that style on a listing page, that has for ex: 500 items..
Is this a known issue? Or am I 'styling' it wrong?
Looking at your css/fiddle its like your adding this like this:
*{ -webkit-backface-visibility: hidden; }
Or in other words you are adding it on all the divs...
NEVER target all elements (of course it will crash if you're calling multiple), only the ones you need to.
But if not this it seems, that it is common using these css on iOS:
Mobile Safari on iOS crashes on big pages
http://www.dimshik.com/ios-7-runs-out-of-memory-when-using-webkit-transform/
I'm working on some CSS being used in a UIWebView in iOS. I'm able to round the corners of a div in iOS 6 using the border-radius property, but I can't replicate the effect in iOS 5.1 using either border-radius or -webkit-border-radius properties. Is there a workaround, or am I doing something wrong? Here's the CSS.
#ad-wrapper {
postion:absolute;
top:50%;
left:50%;
margin-left:-140px;
margin-top:-109px;
width:280px;
height:218px;
position:absolute;
overflow:hidden;
-webkit-border-radius:12px;
border-radius:12px;
}
which works for iOS 6:
but not for iOS 5.1:
I'm brand new to web development (having done mostly native iOS before this), so any help is appreciated.
For iOS 5, I was able to fix it by applying -webkit-border-bottom-left-radius, bottom-right-radius, etc. to the correct sub elements.
I'd still like a better fix, as just using the single corner radius in one place is a much cleaner solution, but I may have to settle for this.
I am implementing a webapp using jQuery Mobile and Phonegap. One thing I am missing, is the following: The App should scroll to the top when the statusbar is tapped.
I have already seen that using Objective C one has to indicate the view that has to scroll to top on tap. Is it possible to do something similar with Javascript/Phonegap?
Update for 22.9.2016
It's working fine
Plugin ID has changed, install it using:
cordova plugin add cordova-plugin-statusbar
Tested with cordova-6.3.1 cordova-ios-4.2.2 in the iOS 10.0 simulator and an iPhone 6s Plus running 9.3.5.
The official status-bar plugin has this feature.
https://github.com/apache/cordova-plugin-statusbar
Install:
cordova plugin add org.apache.cordova.statusbar
In your javascript:
window.addEventListener('statusTap', function() {
//scroll-up or do whatever you want
});
I wrote a plugin to solve this issue
https://github.com/j-mcnally/cordova-statusTap
you can register tap events on the status bar and handle this all in code. With an event listener.
if the content that you are displaying in the phonegap app is bigger then the bounds of the webview, the scroll happens automatically.
Otherwise - for example if you are just scrolling a div using -webkit-overflow-scrolling - you need to use the solution found here:
How to detect touches in status bar
In the scrollViewShouldScrollToTop you need to call
[theWebView stringByEvaluatingJavaScriptFromString:"should_scroll_to_top"];
should_scroll_to_top is a normal function in your js.