We are writing a Cordova/jQuery Mobile app, and coming across an issue with iOS (both 6 and 7). The problem is that CSS is sometimes in iOS is not being applied, even though it should be. The problem is both in the emulator and device itself.
For instance:
A background-color: red is displayed as white.
An element with overflow:scroll (both with and without -webkit-overflow-scrolling: touch) cannot be scrolled.
It's not an inheritance issue - the same CSS works fine in desktop FF, Chrome, Safari, IE and in Android. It also works fine using Safari remote inspection - the style won't be displayed initially, but simply un-checking and then re-checking the property in the Safari developer tools makes it work normally !
I have not be able to isolate what causes this problem, but when it happens it happens consistently. Is there a fix for this problem ?
It should work fine for iOS6. You can try using hexadecimal code for background color and add
-webkit-overflow-scrolling: touch; for smooth scrolling.
For iOS7 the bellow link may help you.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Related
I finally have my site working the way I want it except for a bug that seems to only be with ios devices. I set the css on images on this particular page to be object-fit: contain. The picture should be displayed like this:
on Android and PC
But whenever I open the website on an iphone or an ipad I get this:
IOS
This is affecting the sites animations and really just looks very choppy because of it on iphones. I'm not sure how it could be working so well on android devices and just generally but still persist like this on IOS..I tried different browsers as well no use.
What's even more interesting is that on initial load you will see the incorrect css applied on the image, but after refreshing the page it loads the image with the correct dimensions. I'll appreciate any insight I can get regarding this issue.
Feel free to check out the repository: https://github.com/physicalrobot/vikalpaWebsite
And see the bug for yourself on an iphone or ipad at www.vikalpa.xyz/projects
I tried changing the css of the images to force them all to have a width: 100% and a height: auto.
I tried changing object-fit to anything else in the browser while using web-inspector on the ipad, but still couldn't get it to change.
I'm facing a bit of an odd issue, I have a site which has anchor section links for navigation such as this:People ... <section id="people" ...>
It is working for me on
Linux-Chrome
Android-Chrome
MacOS-Chrome and safari
But doesn't work on IOS safari or chrome, a colleague has also been able to replicate this issue on IOS.
Interestingly it works fine on Xcode simulators and browserstack.
There are lots of things which could be messing this up but I'm not sure which one any advice?
I am using:
Angular
AOS
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
I use -webkit-mask-image in my meteor app, like this:
...
background-color: purple;
-webkit-mask-image: url('images/user_plum.png');
...
It works fine in all browsers. It works fine in the cordova version on Android. It was working fine in iOS Cordova. Now, only in iOS, all of my icons that use this technique are invisible, even though they are still clickable and functioning.
The problem was found on two users' iPhones and I reproduced it in iOS Simulator. My iPhone worked fine. Uninstall/reinstall of the app, rebuild/restart of the server, etc., nothing changed. Until I updated my phone to iOS 11.4, and now my phone has the issue, too. If I remove that -webkit-mask-image line from the CSS, I universally get the proper background-color'ed square where the icon should be. That and other simulator testing makes it clear the invisible icons are only happening on iOS devices and simulator, and only if -webkit-mask-image is in use. Is anyone aware of any changes in iOS between 11.1 and 11.4 that would break Cordova webview's handling of -webkit-mask-image?
Okay, this problem is very real, I've done a bunch of tests, installed different flavors of inappbrowser, etc., all to no avail. But here's a workaround (thanks to #JamesMontagne for the answer and jsfiddle at Is there any way to colorize a white PNG image with CSS only? that led me to try it out):
Just use -webkit-mask-box-image instead of -webkit-mask-image.
background-color: purple;
-webkit-mask-box-image: url('images/user_plum.png');
This continues to work on all the platforms it already worked on, but also works in this iOS 11.x Cordova environment in which it -webkit-mask-image had broken.
To be clear, -webkit-mask-box-image carries the "non-standard" warning in the mozilla docs: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-mask-box-image.
But it works when -webkit-mask-image doesn't, so I'm going with it for now.
Also, fyi, user_plum.png is a transparent png with a plum-colored icon image. It doesn't matter what the color of the non-transparent part is, there's no color math being done in this masking. The icon doesn't have to be white to work (many web pages of css masking topics include discussions of white or black masks).
I solved it in iOS coding both lines for everyicon:
-webkit-mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
mask-image: url(../assets/img/icons/_ionicons_svg_md-list-box.svg);
to the CSS icon... and for some strange reason got to be in THAT ORDER (webkit first, and mask second!)
I have an app on the store which is built using Ratchet framework. It used to work fine, until iOS 8 was released. Now when I test it on iOS 8, title bars for modals won't appear. All the controls like Close, Back buttons on the bar work when I click, but the bar and the controls on it are not visible. This happens only on iOS 8, works fine on iOS 7 and older versions.
To reproduce this bug, please open this sample app http://goratchet.com/examples/app-android-notes in Safari on an iOS 8 device or simulator, and then click on New note button to open a modal.
I've noticed while debugging it in Safari's web inspector that if I move the bar <header>...</header> element of the modal to somewhere else and then bring it back to its original position, it appears. Or sometimes, changing its display property from block to none and then back to block works. Or sometimes if I scroll the page.
Any solution will be highly appreciated
Seems there is an issue with position: fixed in Safari as discussed in this SO question: Mobile safari position:fixed z-index glitch when scrolling
You can fix it by adding this rule to your CSS
header.bar.bar-nav {
-webkit-transform: translateZ(0);
}
You can track the issue on Ratchet's Github repository here - https://github.com/twbs/ratchet/issues/679
You should try position:sticky;. It's made to deal with position on Safari. fixed has been an issue with mobile devices for years. I thought it was fixed but iOs8 has weird behavior too...
http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit
I was required to display my website in a full page iframe, which was already a pain in the ass (I'm ranting sorry).
In the I have a select input and it seems that after I make a selection the screen freezes when the screen is vertical but if I put it in landscape mode it works like a charm.
Also the same thing happens when I go from landscape to vertical mode and again all comes back to normal back in landscape mode.
I though it could be due to some of my scripts but I remove everything and I still got the issue.
And I forgot to mention it, but there was no issue at all before installing ios 7.
I'm at it for a while so any suggestion would be really appreciated.
I tried reducing the code to the minimum cleaning out the unecessary stuff and putting everything together in a single file instead of using partial pages. Since then it seems to work so I'm gonna leave like that it's been long enough.
Still not sure what was the issue even though it worked on IOS 6 and without the iframe or in landscape mode on IOS 7. Anyway I'm done with it