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/
Related
Since iOS10, there seems to be a problem with the CSS border-image attributes.
I used to work with something like this:
border-image: url('data:image/png;base64,somedata') 30 30 30 stretch;
However, since updating to iOS10 on iPad (and I would guess on iPhone as well), the border-image is no longer visible, leaving it transparent.
This happens with Safari and Chrome browsers on iPad.
Here's a fiddle so you can see how it behaves on iPad vs computer:
https://jsfiddle.net/g99y6pg3/1/
I also tried with a border-image: url(filename.png) instead of data:image/png, but got the same result.
Thanks for your help!
You need set property 'border-color' = 'white'
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.
After upgrading Nexus 5 to Android 5.0, an activity with default focus on an EditText does not render correctly (EditText repeats down across the screen with grey dots in between and if you click again or dump the ViewHierarchy with UiAutomator, it will return to normal rendering).
(I would upload the image, but don't yet have reputation for images).
NOTE: This is ONLY after I have loaded a WebView within the application (though in a separate activity). The same screen renders correctly prior to loading the first WebView in the application.
NOTE: This is ONLY a problem on Android 5.0 and (so far) on Nexus 5. I do not have another 5.0 (non-nexus) device to try.
EDIT: This also happened on HTC One with Android 5.01.
NOTE: I have tried disabling hardware acceleration, modifying inputMode, and defaultFocus.
Has anyone seen or solved this problem?
Ended up solving this by changing softInputMode (similar to previous WebView/Keyboard issues, but this time with a native View and EditText).
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_VISIBLE);
I had a similar issue on Lollipop 5.0.1 devices. My solution was to deactivate hardware acceleration in the WebView on these devices before loading any content with loadURL or loadData.
int SDKversion = android.os.Build.VERSION.SDK_INT;
if(SDKversion >= android.os.Build.VERSION_CODES.LOLLIPOP){
webview.setLayerType(View.LAYER_TYPE_SOFTWARE, null);
}
If you do not want to do this, I could also drastically reduce the problem by adding a visibility="gone" webview to the disturbed activities and then calling something like:
webview_dummy.loadData("<head></head><body></body>", "text/html", "utf8");
after the loadURL of the actual webview.
Man, this is really some weird bug!
What solved my problem was to disable the hardware acceleration only on the activity which hosted my fragment. Not on the whole app, but specifically on that activity.
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.
When making a scrollable div, for iOS devices, momentum scroll doesn't work - so you must use the 'beta' -webkit-overflow-scrolling: touch; property.
However, this seems to crash the browser for me - not immediately, but seemingly randomly. Removing all of the -webkit-overflow-scrolling: touch; properties stop the browser from crashing.
I've tried using iScroll, touchSwipe, and a few other plugins that I can't remember the name of, but have either been too cumbersome to implement (I have a very short timeframe for development) or haven't worked as desired.
Does anyone experience the same problem, and if they have, have you found a solution?
I happened to me on bigger list with about over 100 elements.
When I removed it it works, but without the momentum scrolling ofcourse.
I tested on iOS5 and latest iOS6, on both an iPod Touch 4.1 and iPad 2, it seems that on the Touch I get the Safari crash more often, but on the iPad it also happens.
It seems like an Apple bug they didn't properly solve.
I noticed this happening when I had it applied to multiple elements on the page... I dropped it down to being applied only on the "active" div, and it doesn't crash anymore. Lame.
let content = document.querySelector(".content");
if (content.scrollTop <= 0) {
content.scrollTop = 1;
} else if (content.scrollTop >= content.scrollHeight - content.clientHeight) {
content.scrollTop = content.scrollHeight - content.clientHeight - 1;
}