ionic issue while swiping up/down the app but only in iOS - ios

I have an issue with iOS devices when using the ionic 3 framework. Whenever I swipe up/down the app an empty space appears bellow/above the app. I attach an image that shows the empty space at the bottom while swiping up. Similar is for swiping down. I don't have this issue in android devices. How can a disable it?

It seems that using the property no-bounce in ion-content works
<ion-content no-bounce>
html content
</ion-content>

Related

Nativescript app doesn't show top bar in iOS emulator

I want to run our Nativescript app in the iOS emulator so I can make screenshots of different sizes. However, the top bar that shows the title and the back button isn't shown in the emulator. If I click on it, the button does work, but it's not visible.
How can we get the top bar to be visible in the emulator?
See here the difference:
Screenshot from my iphone including top bar:
Screenshot of emulator:
Updating nativescript to "#nativescript/core": "~8.1.0" resolved this issue :)

Buttons are not clickable after scrolling iframe in iOS (Mobile Safari)

Elements inside an iframe are unable to be taped after the iframe is scrolled using window.scrollTo() or window.scrollBy()
Reproduction steps:
Visit https://victornpb.github.io/ios-scrollable-iframe-issue/
Click the buttons on the left, it changes color to show that it is working.
Click the "Scroll down" button and it scrolls the iframe down by 50 pixels.
After that the buttons doesn't work at all.
Screen capture video
It works fine on Desktop Safari, this issue only happens on Mobile Safari
I opened an issue on webkit repo here just in case.
iPhone iOS 12.1 (16B92)
I need to work around this limitation/bug, I can't add external scrolling though, because I need scroll events inside the iframe.

iOS side-loaded expo app horizontally flipped

I'm using expo in my react native project.
Everything is fine when loaded to either Android or iOS emulators. However when I side-load it to my actual iOS phone device, everything is flipped.
The header hamburger menu goes to the right even though the drawer still animated from the left. Text exclamation marks precede the word it's exclaiming.
Even the side drawer content is flipped with the icons on the right and the expand arrows to the left. Looks very much like it's RTL formatted but I don't remember doing anything of the sort.
Loaded on Emulator:
Loaded onto device:
Any ideas?

Ratchet Modal bug on iOS 8

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

Intel App-Framework in UIWebView not showing navbar for iPhone 3.5" screen

I found Intel's App-Framework to be light-weight and fast. However, I am facing a problem that I just can't seems to overcome. In the framework, one can display a navbar that 'stick' to the bottom of the screen. This work fine on the browser, WebView in Android and UIWebView in IOS - except on iPhone with 3.5" screen - the navbar just didn't show up. It appears that the screen is too short to show it.
I have tried playing with "viewport" meta tag by setting various 'height' and disabling & changing OS theme. Nothing works. Anyone has experience on this? How do I adjust the navbar position?
As it turns out, it is not the problem of App-Framework; it is the way UIWebView is placed on the view. After correctly setting UIWebView's top and bottom constraints, I am able to see the navbar correctly set at the bottom of the screen.

Resources