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;
Related
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
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
I am building a small app using PhoneGap HTML/CSS. Now my problem is that position:fixed (used on a top bar) works on iOS 5 but not on iOS 4. Someone knows a fix for this?
Position:fixed doesn't work on iOS before version 5 and some other mobile browsers. There are a lot of solutions out there for this, but one that I can personally recommend is GloveBox written by Nitobi's own Jesse MacFadyen. It lets you define areas that are scrollable, and I believe in your case that would be the main content, while the top bar isn't scrollable.
Another advantage of this approach is that the user won't be able to "scroll out" of your app's view as if it were a normal website on Mobile Safari.
I created an iOS app last year using html, css, js, jqtouch and phonegap. The app has worked well until recently. It appears that since the iOS 5 update, there is a problem with the navigation.
If you scroll down the apps "pages" and try to select any options below the original screen horizon, the navigation doesn't work. Scroll back all the way to the top of the page and the links above the screen horizon all work. If you scroll back up the page, but not all the way to the original starting position, even the links that are above the original screen horizon won't work.
I worked with Phonegap support and they suggested the problem was with jqtouch. I updated the jqtouch files in the project, and now when I try to run the app (from Xcode) in the iPhone simulator or on a test device, the navigation doesn't work at all. Before, the "links/buttons" would change color as they were supposed to but no work. Now, the "links/buttons" won't change color or navigate to the next div or page.
Could someone tell me what I may have missed in updating the jqtouch/jquery files that could cause this?
We had the same issue and e solve it updaing to the latest jquery and jqtouch version.
Hopefully this will help you.
This is an extjs single-page application which works fine in FF, IE, and Safari.
There are several problems with viewing or using this extjs app in the iphone. The extjs panels/windows do not resize, as it would in a normal screen. When the user zooms out, the expanding viewing area is blanked out. An example image is below:
Iphone does not recognize the combo box of the extjs.
Unable to scroll down.
Viewport Issue:
The main issue is with the viewport. It does not scroll or zoom properly in Iphone.
Ext JS is not (and will likely not be) optimized for mobile devices. That's the purpose for Sencha Touch, which is the mobile framework built on Ext JS and specifically intended for iPhone and Android. I doubt you're going to have much luck resolving these types of issues using standard Ext JS.
We have experienced the same kind of problem with ExtJS and iPhones, and a slightly different, yet comparable, problem with android devices. I guess that those browsers report the screen size in a way that confuses ExtJS, so the layout mechanisms do not work. Since Sencha Touch has a similar API like ExtJS, making a Sencha Touch version of your software is probably the smartest way to make it work properly on iDevices and Androids.
Rather than using viewport, I used a column layout panel container. Most of the extjs stuff works fine. I placed this container layout into a div and specified its height and width. Also, <meta name="viewport" content="height=700" />.