I am using shadowbox to display content in a pop-up window. When the content is longer than the screen size, scrolling appears in all PCs and Android device but it does not appear on any Apple devices (Iphone, Ipad, Ipod)
Can any one help me?
I know it's a bit of a late reply but I have just had the same problem and I though I would share my solution just in case it was helpful.
I created a scrollable div using css
overflow-y: scroll;
within the shadowbox frame and this enabled the content to be scrollable on the ipad.
Try this so it doesn't create double scroll bars on other devices target the iDevice.
$(window).load(function(){
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
$('#sb-body-inner').css({
'overflow': 'scroll',
'-webkit-overflow-scrolling': 'touch'
});
}
});
Related
We have fixed the button on bottom of page in RWD mobile using position: fixed. Working fine in Android device, but flickering in iOS device while scrolling. We tried the following to the element fixed. None of them worked. Any solution for this issue?
transform: translate3d(0,0,0);
-webkit-overflow-scrolling: touch;
Try to remove the fixed element from the container that has -webkit-overflow-scrolling and put that somewhere else.
I've looked into stackoverflow and it seems that position:fixed in an iframe for iOS mobile devices has been an issue in the past but have yet to have an answer.
Here's an example I created via jsbin: http://jsbin.com/pekeca/1/
In that example, there is a parent HTML page that uses iframe which contains another HTML page (child). Here are the things to note:
When the parent HTML is viewed on any device, the navigation bar in the child HTML stays fixed. This is the intended behavior.
However, when the parent HTML is viewed on an iPhone regardless of the browser, the navigation bar in the child HTML loses its fixed position. This is a bug that only happens in iPhones.
When the child HTML page is viewed directly (i.e., not inside an iframe) in an iPhone, the navigation bar stays in a fixed position and works fine.
Has anyone figured out a workaround for position:fixed in iPhones or iOS devices?
In Chrome and Safari on iOS it seems the issue here is not the fixed position, but with the height of the iframe. From another SO answer: "Starting in version 4.2.1 of Safari iOS, and still going as of 4.3.3, the entire content of an iFrame is forcibly shown."
These other posts might help you:
iframe on iOS (iPad) content cropping issue - https://stackoverflow.com/a/10816492/1359306
iFrame and Mobile Safari (iPad/iPhone) - https://stackoverflow.com/a/19667786/1359306
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 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.
I have designed an web app well working on desktop browser and on ipad safari.
However, when I install it as an hybrid app with cordova 3.3.0, the height is not proper.
My footer is around 40 to 60 px upper the bottom although I have a position: fixed and bottom:0 rule in my css file.
Thanks for your help.
You might want to take a look at the following question: Div element wont stay at bottom
It could have something to with the webview not scaling properly. Hope this helps.